Javascript 在循环中设置超时

在for循环中设置超时的最佳方式是什么？我有一个方块，点击后，预期的结果是每500毫秒勾选1px。我试图通过将top属性的CSS值设置为I并在500毫秒的超时内换行来实现这一点

现在的情况是，它挂在看起来像是直接向下发射前的前几个像素上

到目前为止，我掌握的情况如下：

$rect.clickfunction{ 对于i=0；i<200；i++{ 函数I{ setTimeoutfunction{ $rect.csstop，i }, 500; }一,； } }; $reset.clickfunction{ $rect.csstop，0； }; 直肠{ 位置：绝对位置； 排名：0； 宽度：200px； 高度：50px； 背景色：333； } 矩形：悬停{ 光标：指针； } 重置{ 浮动：对； }

---

reset您设置timeout是在一个匿名函数中，因此循环调用该函数并进入下一次迭代，几乎一次设置所有超时

此外，您可能希望使用setInterval来完成此操作。它多次重复回调

---

我没有检查您的代码，但是如果您需要移动一个矩形，并且您已经在使用jQuery，那么您也可以使用jQuery滑动efects

例如：

$( "#book" ).slideUp( "slow", function() {
    // Animation complete.
  });

---

有时很难创建这样一个简单的效果，因为这与浏览器如何在绘制时渲染非常快速的更改有关。看起来您正在创建200个超时，所有这些超时都同时运行，每个超时都会将元素向下撞击一个像素，使其看起来像被击落的一样

你想要的更接近这个。设置间隔以运行每500毫秒移动一次长方体的函数：

setInterval(moveBox, 500);
var boxMovedTimes = 0;

function moveBox() {
  $('#rect').css('top', boxMovedTimes + "px");
  boxMovedTimes += 1;
  console.log('moved ' + boxMovedTimes)
}

---

您的计时功能错误，请将其更改为500*i；如果您希望它移动每个迭代

目前，你所有的设置超时都是500毫秒，这就是为什么它会跳跃

$("#rect").click(function() {
    for (let i = 0; i < 200; i++) {
        setTimeout(function() {
        $("#rect").css("top", i); 
        }, 500*i); 
  }     
});

$("#reset").click(function() {
    $("#rect").css("top", "0"); 
});

---

但是你可以使用其他答案中提到的很多其他解决方案。动画、向上滑动都更强大。

为什么不直接使用而不是自己滚动？你的计时功能错误，应该是500*i