jQuery - время ожидания цикла for

Question

Я написал немного jQuery для циклического перебора элементов в массиве, отображения случайного числа, а затем перехода к отображению другого числа. Проблема в том, что я хочу поместить задержку внутри цикла, чтобы она показывала число в течение 2 секунд, а затем переходит к следующему. поэтому вы видите случайное число, которое оно удерживает в течение 2 секунд, а затем переходит к следующему. Я попытался положить таймаут внутри цикла, но это не сработало. Любая помощь будет потрясающей, спасибо.

function RandomNumberGenerator(){

    var myArray = new Array(99);

        for (var i=0; i< 99; i++) {
            myArray[i] = Math.floor(Math.random()*100)
            myArrayTwo[i] = Math.floor(Math.random()*100)
        }

        for (var i=0; i< 9; i++) {
            $('li.num').text(function(index) {

            // timeout needs to be here somewhere 

            return (myArray[i]);

            })
        }
});
}

Answer 1

обратите внимание, что это не самое чистое / лучшее решение, но поскольку никто не опубликовал то, что вы просили, вот реализация задержки в вашем цикле for:

var delay = 2000; //2 seconds
for (var i=0; i< 9; i++) {
    setTimeout(function(index){
       $('li.num').text(myArray[index]);
    },delay * i,i);

Answer 2

Прежде всего вам нужно поместить код, который выполняет работу (отображает случайное число и решает, следует ли его продолжать) внутри своей собственной функции.Эта функция также может быть локальной переменной внутри RandomNumberGenerator:

    var displayNumber = function() {
        $('li.num').text(myArray[i++]);
        if (i < 100) {
            setTimeout(displayNumber, 2000);
        }
    };

Приведенная выше функция помещает число в li.num, увеличивает i и сообщает браузеру, что нужно снова вызвать функцию (используя setTimeout) в течение двух секунд - но только если мы показали меньше 100 чисел.

Поэтому, когда эта функция (displayNumber) вызывается впервые, она отображает одинномер и устанавливает вещи для повторного вызова через 2 секунды (для отображения другого номера и т. д.).Если он уже отобразил 100 номеров, он не устанавливает вызов снова, поэтому в этот момент повторение прекращается.

Теперь вы можете сделать:

    var myArray = new Array(99);
    for (var i=0; i< 99; i++) {
        myArray[i] = Math.floor(Math.random()*100);
    }

    var i = 0;
    var displayNumber = function() {
        $('#foo').text(myArray[i++]);
        if (i < 10) {
            setTimeout(displayNumber, 2000);
        }
    };

    displayNumber(); // to get the ball rolling

Answer 3

Вы действительно не хотите, чтобы тайм-аут «в цикле», вы хотите обновить номер в конце тайм-аута, затем запустить другой тайм-аут, который обновит номер, и повторите пока не будет выполнено ваше конечное условие.

Answer 4

Это довольно лаконичный тип конструкции, который я бы использовал для этого (используя setTimeout вместо setInterval).

var $li = $('li.num');  // Set a local variable for efficiency

var tloop = function(iter, num_of_iters, delay, $li){
    setTimeout(function(){
        $li.text(Math.floor(Math.random()*100)); 
        if (iter < (num_of_iters - 1))  tloop(iter+1, num_of_iters, delay, $li);
    }, delay);
};

tloop(0, 10, 2000, $li);  // Kick off the display

Answer 5

Задержка кода в функции не работает.Браузер не будет показывать никаких обновлений, пока ваш код работает, поэтому вы должны выйти из функции, прежде чем появится изменение.

Итак, вы должны разделить работу на части, которые вы можетевызов с использованием setTimeout или setInterval.

как-то так:

function RandomNumberGenerator(){

  var myArray = new Array(99);

  for (var i = 0; i < 99; i++) {
    myArray[i] = Math.floor(Math.random()*100)
    myArrayTwo[i] = Math.floor(Math.random()*100)
  }

  var index = 0;
  var handle = window.setInterval(function() {
    $('li.num').text(myArray[index]);
    if (++index == 100) {
      window.clearInterval(handle);
    }
  }, 2000);
}