使用带有setTimeout（或其他延迟）的For循环的Javascript

我显然不完全理解setTimeout函数在Javascript中是如何工作的：

function move() {
    var a;
    for(a = 0; a < 101; a++){
        setTimeout(function(){
            block.style.marginTop = (750 - a) + 'px');
        }, 1000);
    }
    for(a = 0; a < 101; a++){
        setTimeout(function(){
            block.style.marginTop = (650 + a) + 'px');
        }, 1000);
    }
}

或者类似的。如果setTimeout是javascript中产生延迟的唯一方法，那么整个setTimeout特性似乎过于复杂。我试过一次，但根本没用

await sleep(1000);

---

如果您对Javascript中的超时和延迟有任何帮助，尤其是在循环中，我们将不胜感激

你可以在我发布的答案中找到价值。这将进一步解释循环中的

setTimeout

另外，你可能想解释一下你想要完成什么。看起来你也是

• 尝试每秒将元素移动一个像素
• 试图在1秒后移动元素约100像素

对于第一个选项，我将使用CSS转换。对于元素如何移动，您将有更多的灵活性，您只需要指定方向和距离

对于第二个选项，您可以抛出循环并将内容保留在内部，在超时后将新的

marginTop

设置为完整值

    setTimeout(function(){
        block.style.marginTop = (750 - a) + 'px');
    }, 1000);

这部分代码在1000毫秒后使用“a”变量。在这段时间里，“a”是100，因为您的循环并没有因为运行setTimeout函数而停止，这是因为javascript是异步的。 在js中解决这个问题的一个解决方案是使用递归函数。如果不需要使用for循环，则可以使用以下代码：

  var a = 0;
  function my_loop(a) {
    if (a < 101) {
      setTimeout(function() {
        block.style.marginTop = (750 - a) + 'px');
        my_loop(a);
      }, 100);

      a++;
    }
  }
  my_loop(a);

var a=0；
函数my_循环（a）{
if（a<101）{
setTimeout（函数（）{
block.style.marginTop=（750-a）+“px”）；
我的循环（a）；
}, 100);
a++；
}
}
我的循环（a）；

---

但是如果你想解决你的问题，我郑重建议你使用CSS。

正如@squint提到的，你可以使用

setInterval

完成你的任务

下面是一个例子：

//创建一个元素
常数宽度=10；
const el=document.createElement（'div'）；
el.setAttribute（'id'，'main'）；
文件.正文.附件（el）；
el.style.width=宽度+px；
//问题相关代码从这里开始
常量a=[…数组（101）.keys（）]；//创建[0,1,2,3，…]的奇特方法
const it=a[Symbol.iterator]（）；//为了方便
常量int=setInterval（（）=>{
const{value，done}=it.next（）；//下一次迭代
如果（完成）{clearInterval（int）；return}；//完成？
el.style.width=width+value+'px'；//调整宽度
}, 10);
#主{
高度：100px；
宽度：10px；
背景：绿色；
}
摆脱循环，改用
setInterval
。不管怎样，它都不会暂停脚本。这是需要理解的重要问题。有一个比所有这些设置超时都将同时执行更大的问题：它们的回调将存储对a的引用，而不是在设置超时时
a
的实际值。这意味着，对于这两个for循环，调用setTimeout的值
a
为101101次。我建议您阅读一些叫做变量提升的内容，并开始使用let/const而不是var。即使像@swint建议的那样，您使用setInterval，这个问题仍然存在。
  var a = 0;
  function my_loop(a) {
    if (a < 101) {
      setTimeout(function() {
        block.style.marginTop = (750 - a) + 'px');
        my_loop(a);
      }, 100);

      a++;
    }
  }
  my_loop(a);