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毫秒后再次不可见，那么您希望将第二个调用放在第一个调用中。

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