Question

我使用drawImage在画布上构建了一个图像，使用了几个部分。

我现在想要尝试将它们逐个加载，或者尝试设置它们的动画或修改用于在最初加载后构成完整图像的部分的大小。

我无法让他们使用setTimeout函数，这是否是一个合适的方法？还是有更好的方法？

这是我的原始工作画布，内置了几个图像片段： https://codepen.io/anon/pen/MyaMOK

这是我尝试将它们逐个加载setTimeout：

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

似乎只是加载1＆＃34; piece＆＃34;在右下角，没有其他人，虽然这种方法似乎在setTimeout之外正常工作。

有人可以建议一个可行的解决方案吗？

Answer 1

想出来。

在函数内制作函数=坏。将setTimeout函数移到for循环之外并将变量从内部传递给它，更新后的工作代码在这里：

Answer 2

我接受了您的代码并通过在console.log函数之前和setTimeout函数的callback内添加setTimeout来修改代码。

结果是循环按预期工作。每次迭代都会更新piece对象。

但是，setTimeout函数仅在整个循环耗尽后才被调用，令我惊讶的是，它为piece对象采用了相同的值。

据我所知，它之所以表现如此：

setTimeout函数只注册callback函数（稍后执行），但不阻止循环（它是异步的）。
因此，循环继续而不执行setTimeout内的任何回调，而piece会在整个过程中更新。
当循环耗尽时，callback函数开始执行。但是，所有回调都指向相同的piece对象（由于hoisting，并且因为javascipt不是块范围的），因此它们都获得相同的值。 / p>
结论：所有图像片段都正确输出，但它们在同一个地方输出，一个在另一个上面。

为什么将setTimeout放入另一个函数中

将setTimeout放在另一个函数中是有效的，因为调用new函数会创建一个带有自己的piece对象的新作用域，即它不再与同一个全局piece对象共享。