Javascript JS-连续几次设置超时？

只是对

我正在使用以下代码使图片上下移动：

icon.style.top = top-50 + "px";
setTimeout ( function() { icon.style.top = top + "px"; }, 200) ;

现在我想实施更多的中间职位。这个想法是为了产生翻译效果。我试图堆叠setTimeout行，但没有成功

我现在正在读一些关于clearTimeout的东西，但也许你的帮助会使它工作得更好。谢谢

如果需要，可以“堆叠”setTimeout调用。请记住，它们会立即被调用，并且仅在给定毫秒参数后才采取操作

因此，如果我希望三次回调在彼此相隔200毫秒的时间内发生，那么使用200作为参数是不正确的。第一个应该是200，然后是400，然后是600-或者将其分解为

i*200

，其中

i

是迭代器

var offsets = [-50,50,0,-100,100,0];   //some set of pixel offsets
var timing = 200;   //the 200 millisecond argument
for(var i = 0; i < offsets.length; i++){   //loop through offsets with i
    (function(i){ //close over the i value to ensure the value is saved
    setTimeout( function() {   //setup the timeout
        icon.style.top = (top+offsets[i]) + "px";   //change the style offset
    }, timing*i);   //multiply the 200 milliseconds by loop counter
    })(i)   //close over the i value
}

var offset=[-50,50,0，-100100,0]//一些像素偏移
var定时=200//200毫秒参数
对于（var i=0；i

在一行中设置几个超时是完全有效的：每个超时都将在其自身的延迟结束时执行。但是，对于动画，您可能希望使用一个命名函数，该函数设置一个超时来调用自身以排队等待动画的下一帧。^正如@nnnnnn所说，您确实应该使用一个命名函数，在执行结束时触发动画。JQuery动画就是一个很好的例子。谢谢adaneo，它工作得很好，我只是在大多数情况下没有完全理解setTimeout是ok的，但是你不应该同时触发它们。最好是将调用链接起来，因为不能保证在指定的时间进行调用。一个更好的方法是根据初始时间来计算tween，以解释这些延迟。也就是说，您计划了一个200毫秒的超时，但它只有在300秒后才会触发。您可以将下一个超时设置为100毫秒，以防止延迟累积并调整当前css属性（在本例中为偏移量），将延迟考虑在内account@JuanMendes-这只是解释如何在OP的文字中“堆叠”超时。请注意，问题不是“如何安排在特定时间触发回调”，这需要一个全局间隔和一个调度程序来触发回调。与调度程序一起使用时间间隔要比链接回调甚至触发回调的“堆栈”更高效、更准确，如图所示。但是，这不是真正的问题。我对你的答案投了赞成票，它回答了问题。我只是指出这是个坏主意，还有更好的办法。我希望“与调度器一起使用interval”并不意味着setInterval，因为这是您可能做的最糟糕的事情，调用可能会排队等待系统陷入困境，并且它们会立即触发。有时，当OP计划做一些有很多缺点的事情时，你必须回答这个问题。