SetTimeout重叠？

Question

这是我的一段代码。图像在23毫秒后正常显示，但永远不会像第二行所说的那样变回隐藏状态。如果我将它从17毫秒更改为大于23毫秒的值，它就可以工作。反之亦然，如果我将第一行更改为16毫秒，则可行。看起来第二行在第一行之前执行并完成，因此它只是保持可见。我该如何解决这个问题？

setTimeout(function(){img.style.visibility = 'visible';},23);
setTimeout(function(){img.style.visibility = 'hidden';},17);

Answer 1

这两行都是一个接着一个地执行。然后，稍后，调用您传递到setTimeout的函数。根据你给出的延迟来调用它们。所以当你给第二个延迟时间较短时，当然会先调用它。

如果您的目标是让img在23毫秒后变得可见，然后再在17毫秒之后再次隐身，那么您希望将第二个调用放在中。< / p>

setTimeout(function(){
    img.style.visibility = 'visible';
    setTimeout(function(){
        img.style.visibility = 'hidden';
    }, 17);
}, 23);

那就是说，记住人类是缓慢而笨拙的生物。 :-)对于一个普通人来说，这个图像基本上永远不可见，17ms只是间隔太短。

Answer 2

这就是setTimout的工作方式

setTimeout(function(){img.style.visibility = 'visible';},23);//execute after 23 ms
setTimeout(function(){img.style.visibility = 'hidden';},17);//execute after 17 ms

.
.
.
17 ms passed -> function(){img.style.visibility = 'hidden';}
.
.
.
23 ms passed -> function(){img.style.visibility = 'visible';}

你可能想要的是

setTimeout(function() {
    img.style.visibility = 'visible';
    setTimeout(function() {
        img.style.visibility = 'hidden';
    }, 17);
}, 23);

然后，它看起来像

.
.
.
23 ms passed -> function(){img.style.visibility = 'visible';
                setTimeout(function(){img.style.visibility = 'hidden';},17);}
.
.
.
40 ms passed -> function(){img.style.visibility = 'hidden';}

Answer 3

因为17小于23. setTimeout代码是异步的，第二行不等待第一行完成。它们都运行并记录执行时间。

如果您希望它在17毫秒之后，您需要执行23 + 17

Answer 4

setTimeout()调用具有延迟的子进程。如此有效，第二行在第一行之前执行。