drawImage на холсте с setTimeout

Question

Я создал изображение на холсте с drawImage, используя несколько частей.

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

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

Вот мой исходный рабочий холст построен несколько частей изображения: https://codepen.io/anon/pen/MyaMOK

Вот моя попытка загрузки их в 1 на 1 и setTimeout:

setTimeout(function(){ 
    ctx.drawImage(img, piece.sx, piece.sy, piece.sWidth, piece.sHeight, piece.x, piece.y, piece.w, piece.h); 
},100*tileCount); 

https://codepen.io/anon/pen/RaWzgJ

кажется просто загрузите 1 "кусок" в нижний правый угол и ни один из остальных, хотя этот метод работает отлично за пределами setTimeout.

Может ли кто-нибудь предложить приемлемое решение?

Answer 1

Выяснил это.

создание функция в пределах функция = плохой. переместил setTimeout функцию вне для цикла и передаются переменные к нему изнутри, обновленный рабочий codepen здесь:

https://codepen.io/anon/pen/RaWzgJ

Answer 2

Я взял свой код и изменить его, добавив console.log перед функцией setTimeout и внутри callbacksetTimeout функция.

Результатом было то, что петли работали должным образом. Объект piece обновлялся для каждой итерации.

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

Причина, почему она вела себя, как это, в соответствии со мной, таким образом:

1. setTimeout функция регистрирует только функцию callback (должна быть выполнена позже), но не блокирует цикл (это асинхронный) ,

2. Следовательно, цикл продолжается без выполнения каких-либо обратных вызовов в пределах setTimeout, а piece обновляется.

3. Когда цикл исчерпан, начинают выполняться функции callback. Однако, все обратные вызовы относятся к одному и тому же объекту piece (из-за hoisting и потому что javascipt не является блочным), поэтому все они получают одинаковое значение.

4. Заключение: все части изображения правильно выведены, , но они выводятся на одном месте, один поверх другого.

Почему положить setTimeout в другой функции работы:

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