setTimeout in for loop срабатывает сразу

Question

Я пытаюсь запустить setTimeout внутри цикла for. Я выполнил рекомендации по перемещению setTimeout в отдельную функцию. Однако все, кажется, срабатывает сразу, в конце цикла.

В этом примере я хотел бы, чтобы console.logs запускались каждую секунду.

function setDelay(i) { 
    setTimeout(function(){ 
     console.log(i); 
    }, 1000); 
} 

for (var i = 1; i <= 10; ++i) { 
    setDelay(i); 
} 

Answer 1

Проблема с кодом заключается в том, что он создаст 10 тайм-аутов, которые срабатывают более или менее одновременно через 1 секунду.

Если вы хотите выполнить что-то каждую секунду (или любую другую частоту), вместо этого вы можете использовать setInterval.

Answer 2

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

function setDelay(i) { 
    setTimeout(function(){ 
     console.log(i); 
    }, i * 1000); 
} 

Answer 3

Там не будет задержки в цикле, так что вы на самом деле хотите, чтобы установить интервал в 1000 мс в первый раз и 2000 мс в вторых и т. д.

function setDelay(i) { 
    setTimeout(function(){ 
     console.log(i); 
    }, 1000 * i); 
} 

for (var i = 1; i <= 10; ++i) { 
    setDelay(i); 
} 

Этого можно легко достичь, умножив время на указательную переменную.

Answer 4

Вы можете лучше использовать setInterval() вместо setTimeout(). С clearInterval() вы можете остановить его от запуска. Код, который вы создали, не работает, потому что for-loop не имеет области от себя. Вы можете работать с циклом for, используя setInterval().

Answer 5

Вы также можете сделать это:

(function updateEverySecond(){ 
    console.log(1); 
    setTimeout(updateEverySecond, 1000); 
})(); 

Answer 6

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

(function(){ 
 
    var count  = 0, 
 
     upperBound = 3, 
 
     intervalTime = 1000, 
 
     interval  = setInterval(function(){ 
 
     if (count === upperBound) { 
 
     clearInterval(interval); 
 
     } else { 
 
      console.log(count); 
 
      count++; 
 
     } 
 
     }, intervalTime); 
 
}());

Надежда, что помогает вам!