Jquery Отложенный и несколько отложенных в цепи

Question

помощи, пожалуйста:

Например я 20 Таймауты, созданный window.setTimeout и я хочу, чтобы они проходили один за другим:

ожидания вызова 1 => после того, как завершить таймаут вызова 2 => после окончания тайм-аута 3 и т. д.

Как правило, существует множество функций, а количество таймаутов не фиксировано.

моя функция с отложенным:

function someFunction(index) { 
    console.log("someFunction called, index = " + index); 
    var $deferred = $.Deferred(); 

    window.setTimeout(function() { 
     $deferred.resolve(); 
    }, 2000); 

    return $deferred.promise(); 
} 

цикл:

var $deferred; 
$(someArray).each(function (index) { 
    if (!$deferred) { 
     $deferred = someFunction(index); 
    } else { 
     $deferred.then(function() { 
      return someFunction(index); 
     }); 
    } 
}); 

все остальные запускаются сразу, без в цепи

Answer 1

Если вы хотите приковать их один за другим, вам нужно будет это сделать:

var $deferred; 
$(someArray).each(function (index) { 
    if (!$deferred) { 
     $deferred = someFunction(index); 
    } else { 
     $deferred = $deferred.then(function() { 
      return someFunction(index); 
     }); 
    } 
}); 

Что вы делаете, поставив все .then() обработчиков на том же отложил, который будет запускать их все параллельно, а не последовательно. То, что вам нужно, эквивалентно p.then (...), затем (...), затем (...). Так как каждый .then() возвращает новое обещание, вам нужно подключиться к следующей ссылке в цепочке.

---

Вы можете найти этот шаблон проектирования немного проще для итерации через последовательно массив с асинхронной операции, которая генерирует обещание:

someArray.reduce(function(p, item) { 
    return p.then(function() { 
     return someFunction(item); 
    }); 
}, $.Deferred().resolve()).then(function() { 
    // all done here 
}); 

Работа демо: http://jsfiddle.net/jfriend00/uusjs3mt/

Answer 2

Попробуйте с помощью $.queue(), $.dequeue(), $.map()

function someFunction(index) { 
 
    console.log("someFunction called, index = " + index); 
 
    var $deferred = $.Deferred(); 
 

 
    window.setTimeout(function() { 
 
    $deferred.resolve(); 
 
    }, 2000); 
 

 
    return $deferred.promise(); 
 
} 
 

 
var someArray = [1, 2, 3, 4, 5]; 
 

 
$.queue(someArray, "dfd", $.map(someArray, function(value, index) { 
 
    return function(next) { 
 
    someFunction(index).then(next) 
 
    } 
 
})); 
 
$.dequeue(someArray, "dfd");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script>

Answer 3

Оба метода работают:

$.queue(someArray, "dfd", $.map(someArray, function(value, index) { 
    return function(next) { 
    someFunction(index).then(next) 
    } 
})); 
$.dequeue(someArray, "dfd"); 

и

someArray.reduce(function(p, item) { 
    return p.then(function() { 
     return someFunction(item); 
    }); 
}, $.Deferred().resolve()).then(function() { 
    // all done here 
});