Question

我希望在我的同时颜色（间隔）开始时禁用我的下拉列表。在我的情况下，我在5秒后手动设置截止值。我所遇到的是，当我将重新激活器放在我的case块中时，它不会等待setTimeout。或者两个调用同时触发，因此当setTimeout触发时（也就是等待那五秒钟），下一个调用（重新激活器）也会触发？

另一个问题 - 以及我想要在我的色彩射击时停用下拉列表的原因 - 我注意到当色彩射击时，如果我再次点击下拉 - -aka以触发对它的另一个调用，第二次调用将导致颜色无休止地触发（假设以某种方式创建无限循环）。想为什么？

 function timeToHexColor(){
    var time = new Date();
    var timestamp = time.toString("hh:mm:ss");
    document.getElementById("board").innerHTML += 
                              "#" + timestamp.split(":").join("") + "<br/>";   
}

function Colors(interval) {
    this.interval = interval;
    switch (this.interval) {
        case 'second': 
            document.getElementById('options').disabled = true;
            x = setInterval(timeToHexColor,1000);
            setTimeout(stopColors, 5000);
            //Placing the re-activtor here executes instantly not after the setTimeout.
            //document.getElementById('options').disabled = false;
            break;
        case 'minute': 
            x = setInterval(timeToHexColor,60000);
            setTimeout(stopColors, 5000);
            document.getElementById('options').disabled = true;
            break;       
        case 'hour': 
            x = setInterval(timeToHexColor,60000*60);
            setTimeout(stopColors, 5000);
            document.getElementById('options').disabled = true;
            break;
        case 'day': 
            x = setInterval(timeToHexColor,60000*1440);
            setTimeout(stopColors, 5000);
            document.getElementById('options').disabled = true;
            break;
        default: 
    }
}

function stopColors() {
    clearInterval(x);
    //Placing the re-activator here instead works they way I intended,
    //after the repeat cycle is finished.
    document.getElementById('options').disabled = false;

}
$("#options").prop('selectedIndex',-1);
$("#options").change(function() {
  Colors('second');
});

Answer 1

我认为您期望setTimeout暂停代码执行。这不是setTimeout所做的。它会调度您传递给它的函数，以便稍后执行并立即返回。

如果要构建代码，以便重新激活器位于switch语句附近，而不是stopColors使用匿名函数：

document.getElementById('options').disabled = true;
 x = setInterval(timeToHexColor,1000);
 setTimeout(function(){
     stopColors();
     document.getElementById('options').disabled = false;
 }, 5000);

您会注意到，这与将{_ {1}}中的重新激活器放在一起完全相同，但现在它不是stopColors中的硬编码（可能会使该函数更具可重用性？）。所以它基本上是你想要重新激活代码的样式问题。 stopColors背后的机制仍然有效。

请注意，javascript是单线程的。这就是为什么像setTimeout和setTimeout这样的函数的行为方式 - 继续执行javascript直到脚本结束，然后在某些时候浏览器将执行给定的函数。如果您尝试暂停执行，那么浏览器将无需处理时间来执行绘制到屏幕或接受用户点击或下载ajax响应等操作。

函数立即执行，而不是等待setTimeout

1 个答案: