javascript - 为什么这个 setTimeout 解决方法在 javascript 中不起作用？

Question

我需要延迟执行 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

Answer 1

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);

Answer 2

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);

Answer 3

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);