Как создать паузу или задержку цикла FOR?

Я работаю над сайтом, где мне нужно создать паузу или задержку.
Поэтому, пожалуйста, скажите мне, как создать паузу или задержку в цикле for в javascript или jQuery

Это пример теста

 var s = document.getElementById("div1");
 for (i = 0; i < 10; i++) {
     s.innerHTML = s.innerHTML + i.toString();
     //create a pause of 2 seconds.
  }

Ответ 1

Я пробовал все, но я думаю, что этот код лучше, это очень простой код.

var s = document.getElementById("div1");
var i = 0;
setInterval(function () {s.innerHTML = s.innerHTML + i.toString();  i++;}, 2000);

Ответ 2

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

Используйте setTimeout для запуска фрагментов кода позднее:

var s = document.getElementById("div1");
for (i = 0; i < 10; i++) {

  // create a closure to preserve the value of "i"
  (function(i){

    window.setTimeout(function(){
      s.innerHTML = s.innerHTML + i.toString();
    }, i * 2000);

  }(i));

}

Ответ 3

var wonderfulFunction = function(i) {
   var s = document.getElementById("div1"); //you could pass this element as a parameter as well
   i = i || 0;
   if(i < 10) {
      s.innerHTML = s.innerHTML + i.toString();

      i++;
      //create a pause of 2 seconds.
      setTimeout(function() { wonderfulFunction(i) }, 2000);          
   }
}

//first call
wonderfulFunction(); //or wonderfulFunction(0);

Вы не можете приостановить javascript-код, весь язык создан для работы с событиями, предоставленное мной решение позволяет выполнять функцию с некоторой задержкой, но выполнение никогда не останавливается.

Ответ 4

если вы хотите создать паузу или задержку в цикле FOR, единственным реальным методом является

while (true) {
    if( new Date()-startTime >= 2000) {
        break;
    }
}

startTime - это время, прежде чем вы запустите время но этот метод заставит браузеры стать очень медленными.

Ответ 5

Невозможно напрямую приостановить функцию Javascript в цикле for, а затем возобновить в этой точке.

Ответ 6

Следующий код - пример псевдо-многопоточности, который вы можете сделать в JS, это примерно пример того, как вы можете задержать каждую итерацию цикла:

var counter = 0;

// A single iteration of your loop
// log the current value of counter as an example
// then wait before doing the next iteration
function printCounter() {
    console.log(counter);
    counter++;
    if (counter < 10)
        setTimeout(printCounter, 1000);
}

// Start the loop    
printCounter();

Ответ 7

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

var s = document.getElementById("div1");
for (i = 0; i < 10; i++) {
   Frame(2000, function(callback){ // each iteration would pause by 2 secs
      s.innerHTML = s.innerHTML + i.toString();
      callback();
   }); 
}
Frame.start();

В этом случае это почти то же самое, что и примеры, которые используют setTimeout, но Frame предлагает множество преимуществ, особенно если вы пытаетесь выполнить множественные или вложенные тайм-ауты или имеете большее приложение JS, которое требуется таймаутам для работы внутри.

Ответ 8

Я выполняю функцию, где мне нужен доступ к свойствам внешнего объекта. Итак, закрытие в Guffa решение для меня не работает. Я нашел вариант решения nicosantangelo, просто упакуя setTimeout в оператор if, чтобы он не запускался вечно.

    var i = 0;
    function test(){

        rootObj.arrayOfObj[i].someFunction();
        i++;
        if( i < rootObj.arrayOfObj.length ){
            setTimeout(test, 50 ); //50ms delay
        }

    }
    test();

Ответ 9

Я нашел способ просто использовать setInterval() для цикла. Вот мой пример кода:

var i = 0;
var inte = setInterval(() => {
    doSomething();

    if (i == 9) clearInterval(inte);
    i++;
}, 1000);

function doSomething() {
    console.log(i);
};

Это переходит от 0 до 9, ожидая 1 секунду между каждой итерацией.

Выход:

0 1 2 3 4 5 6 7 8 9

Ответ 10

Вот как вы должны это делать

var i = 0;
setTimeout(function() {
   s.innerHTML = s.innerHTML + i.toString();
   i++;
},2000);

Ответ 11

Я использовал цикл do... while, чтобы задержать мой код для модального диалога, который закрывался слишком быстро.

your stuff....

var tNow = Date.now();
var dateDiff = 0;
do {
    dateDiff = Date.now() - tNow;
} while (dateDiff < 1000); //milliseconds - 2000 = 2 seconds

your stuff....