为什么这个setTimeout解决方案不能在javascript中工作

Why this setTimeout workaround does not work in javascript?

本文关键字：javascript 工作 不能 解决方案 setTimeout 为什么      更新时间：2023-09-26

我需要一个接一个地执行4个不同的代码片段，有一些延迟。我想出了这个技巧来创建简单的睡眠功能，但它并没有呈现出预期的结果。

function pauseScript (delay) {
    setTimeout(function() { return true; }, delay);
}
....
//code to be delayed
if (pauseScript(1000)) { 
    document.getElementById("message1").style.visibility='visible'; 
}
...
if (pauseScript(1000)) { 
    document.getElementById("message4").style.visibility='visible'; 
}
//code to be executed after 4 messages are revealed

setTimeout不阻塞脚本的执行。你应该这样做:

setTimeout(function() {
    // code to be delayed
},1000);

在您的例子中，您似乎有四个消息要按顺序显示?试试这个:

setTimeout(function() {
    var f = arguments.callee;
    f.i = (f.i || 0)+1;
    document.getElementById('message'+f.i).style.visibility = "visible";
    if( f.i < 4) setTimeout(f,1000);
    else {
        // code to be run after all messages are shown.
    }
},1000);

function pauseScript(callbacks, delay) {
    for(var i = 0, len = callbacks.length; i < len; i++){
        setTimeout(callbacks[i], (i + 1) * delay);
    }
}
var getMessageDelegates = [
    function(){
        document.getElementById("message1").style.visibility='visible'; 
    },...,
    function(){
        document.getElementById("message4").style.visibility='visible'; 
    }
];
pauseScript(1000, getMessageDelegates);

setTimeout不会暂停您的脚本。相反，它将调度您传递给它的函数，以便稍后异步执行。

我认为你想这样做:

setTimeout(function(){
    document.getElementById("message1").style.visibility='visible'; 
}, 1000);
setTimeout(function(){
    document.getElementById("message2").style.visibility='visible'; 
}, 2000);
setTimeout(function(){
    document.getElementById("message3").style.visibility='visible'; 
}, 3000);
setTimeout(function(){
    document.getElementById("message4").style.visibility='visible'; 
}, 4000);
相关文章：