setTimeout()函数可以立即执行，没有延迟。

Question

我有一个程序，其中一个HTML按钮调用了一个jQuery函数（称其为funcOne）。该函数又调用了一个递归函数（称其为funcTwo），该函数会更改DOM中的某些CSS。funcTwo包含两个setTimeout()调用以延迟CSS更改，从而创建一种闪烁效果。

funcOne大致如下：

function funcOne(stringOfNumbers){

    //This function does some other stuff that does not interfere with funcTwo
    someUnrelatedFunction(); 

    funcTwo(time);

    return;
}

funcTwo的代码大概长这个样子：

function funcTwo(time){

    if(time == ""){return true;}

    var delay = time.charAt(0);
    var numDelay = parseInt(delay);

    setTimeout(function(){
        $("#container").css("background-color", "white");
        console.log("Changed to white");
    }, 1000); //Arbitrary delay

    setTimeout(function(){
        $("#container").css("background-color", "black");
        console.log("Changed to black");
    }, numDelay); //Variable delay

    time = time.substr(1);

    return funcTwo(time);

}

控制台显示了两个信息，所以我知道脚本正在运行。我没有收到任何堆栈溢出错误。 然而，两种延迟（任意和变量）都没有运行。#container立即变成黑色。

我做错了什么？任何帮助都将不胜感激。

- nucleic550

Answer 1

我看到的一个问题是，在颜色变为黑色之前允许的最大延迟时间是9毫秒。由于您将第二个延迟变量的值赋为时间变量的第一个字符，而最大的一位数是9。如果您希望先将背景颜色运行到白色，则应该将第二个setTimeout()移动到第一个setTimeout()内部，以便只在背景为白色时准备运行它。setTimeout()已准备好，不会立即运行函数。在您的代码中，这允许在实际运行函数之前运行setTimeout()之后的代码。

- user8851991

---

我注意到另一个问题：如果我在func2之后添加另一个无关的函数（所以现在func1有3个函数调用），时间延迟再次被忽略了。我该如何解决这个问题？ - nucleic550

虽然这是正确的，但背景应在1秒后更改为白色。 - Kaiido

@nucleic550，然后您可以在funcOne中放置更多的setTimeout函数，或者在funcTwo中触发新的setTimeout。 - user8851991

Answer 2

Set Time setTimeout()有两个参数，第一个参数是回调函数，第二个参数是以毫秒为单位的时间间隔。所以在你的情况下，你将它设置为1000，即1秒钟。并且会在1秒钟后准确地运行。

 setTimeout(function(){

        alert("Changed to white");
    }, 1000); 

- Faraz Babakhel