javascript - 在循环内设置超时

Question

在 for 循环中设置超时具体如何最好？我有一个正方形，单击后，预期结果是它每 500 毫秒下降 1 像素。我尝试通过将 top 属性的 CSS 值设置为 i 并以 500 毫秒的超时时间进行包装来实现此目的。

发生的事情是它“挂”在看起来像前几个像素的地方，然后直接启动到底部。

到目前为止我所拥有的内容如下:

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

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

#rect {
  position: absolute;
  top: 0;
  width: 200px;
  height: 50px;
  background-color: #333;
}

#rect:hover {
  cursor: pointer;
}

#reset {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="rect"></div>

<button id="reset">reset</button>

为什么在循环内的超时中声明 i 的顶部属性值不起作用？

Answer 1

你的计时函数错误，改成500*i；如果你希望它每次迭代都移动。

目前你所有的 setTimeOuts 都会在 500ms 触发，这就是它跳跃的原因

$("#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"); 
});

但是您可以使用其他答案中提到的许多其他解决方案。动画、向上滑动都更加健壮。