Javascript 使用setTimeout在画布上绘制图像

我已经建立了一个画布上的图像与drawImage使用了几件

现在，我想尝试将它们逐个加载，或者尝试为它们设置动画，或者在初始加载后修改用于组成完整图像的片段的大小

我很难让他们使用

setTimeout

函数，这是一种合适的方法吗？还是有更好的办法

这是我最初的工作画布，由几个图像块组成：

下面是我尝试以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);

它似乎只在右下角加载了1个“工件”，其他的都没有加载，尽管在

setTimeout

之外，这种方法似乎工作得很好

有人能提出一个可行的解决方案吗？

找到了

在函数中生成函数=错误。将

setTimeout

函数移到for循环外部，并从内部将变量传递给它，更新后的工作代码笔如下：

把它弄明白了

在函数中生成函数=错误。将

setTimeout

函数移到for循环外部，并从内部将变量传递给它，更新后的工作代码笔如下：

---

我获取了您的代码并对其进行了修改，在

setTimeout

函数之前和

setTimeout

函数的

回调中添加了
console.log

结果是这些循环按预期工作。
片段
对象在每次迭代中都会得到更新

然而，
setTimeout
函数只有在整个循环耗尽后才被调用，令我惊讶的是，它对
piece
对象采用了相同的值

据我所说，它这样做的原因是：

setTimeout
函数只注册
回调
函数（稍后执行），但不阻塞循环（它是异步的）

因此，循环将继续，而不执行
setTimeout
中的任何回调，并且
piece
将通过out更新

循环用尽时，
回调
函数开始执行但是，所有回调都引用相同的
片段
对象（因为javascipt没有块作用域），因此它们都得到相同的值

结论：所有图像块都正确输出，但它们在同一个位置输出，一个接一个

为什么将
setTimeout
放在另一个函数中有效：

将
setTimeout
放在另一个函数中会起作用，因为调用新函数会创建一个具有自己的
piece
对象的新作用域，即。，它不再从同一个全局
块
对象共享。
我获取了您的代码，并通过在
设置超时
函数之前和
设置超时
函数的
回调
中添加
控制台.log
对其进行了修改

结果是这些循环按预期工作。
片段
对象在每次迭代中都会得到更新

然而，
setTimeout
函数只有在整个循环耗尽后才被调用，令我惊讶的是，它对
piece
对象采用了相同的值

据我所说，它这样做的原因是：

setTimeout
函数只注册
回调
函数（稍后执行），但不阻塞循环（它是异步的）

因此，循环将继续，而不执行
setTimeout
中的任何回调，并且
piece
将通过out更新

循环用尽时，
回调
函数开始执行但是，所有回调都引用相同的
片段
对象（因为javascipt没有块作用域），因此它们都得到相同的值

结论：所有图像块都正确输出，但它们在同一个位置输出，一个接一个

为什么将
setTimeout
放在另一个函数中有效：

将
setTimeout
放在另一个函数中会起作用，因为调用新函数会创建一个具有自己的
piece
对象的新作用域，即。，它不再从同一全局
块
对象共享。
setTimeout
等待第二个参数中指定的持续时间，然后调用
回调函数一次。我想您正在寻找
setInterval
。我知道其中的区别，我只希望每个循环执行一次。否则，我将在许多“片段”上创建无限循环。
setTimeout
等待第二个参数中指定的持续时间，然后调用
回调
函数一次。我想您正在寻找
setInterval
。我知道其中的区别，我只希望每个循环执行一次。否则，我会在许多“片段”上创建无限循环。我很惊讶这能奏效，不知道为什么。你知道吗？在上一个例子中，我注意到每一个
片段的值在每次迭代中都保持不变。所以我想知道是否有其他错误，
piece的值。有些东西在每次迭代中都没有得到更新。我很惊讶这是有效的，不知道为什么。你知道吗？在上一个例子中，我注意到每一个
片段的值在每次迭代中都保持不变。所以我想知道是不是有什么别的地方出错了，
piece.something
的值没有在每次迭代中更新。