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 立即变黑。

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

Answer 1

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

Answer 2

设置时间 setTimeout(( 有两个参数 第一个参数是回调函数，第二个参数是以毫秒为单位的时间间隔。 因此，在您的情况下，您将其设置为 1000，即 1 秒。 并在 1 秒后准确运行。

 setTimeout(function(){
        alert("Changed to white");
    }, 1000);