Задержка внутри цикла в JS

Рейтинг: -1Ответов: 1Опубликовано: 17.04.2015

Имеется цикл, в теле которого каким-то образом изменяется массив. И функция, которая отрисовывает этот массив на canvas.

Нужно чтобы в конце каждого шага цикла функция, отрисовывающая массив, вызывалась с задержкой. Пытался сделать примерно так:

var myArray
for (var i = 0; i < length; ++i) {
    // как-то изменяем myArray...
    // и отрисовываем на канве с задержкой
    setTimeout(drawOnCanvas(myArray), 2000)
}

Но дело в том, что когда вызывается setTimeout на первом шаге и ждет 2 с. цикл успевает полностью выполниться и drawOnCanvas рисует не массив после первой итерации, а массив, который получен после выполнения всего цикла. Что можно сделать в данной ситуации?

javascript анимация
Источник: Stack Overflow на русском

Ответы

▲ 1

Это стандартное поведение Javascript. Если не ошибаюсь то это связано с его работой только в одном потоке, также у вас ошибка при передачи первого параметра в функцию setTimeout, а именно вы передаете туда результат функции, а не её саму или ссылку на неё.

Как решение можно воспользоваться методом bind объекта Function

Получится что-то вроде, 

var myArray
for (var i = 0; i < length; ++i) {
    setTimeout(drawOnCanvas.bind(this, myArray), 2000);
}

Внимание! Первый параметр метода bind будет контекстом функции.