0

我想在我的 while Colors(interval) 触发时禁用我的下拉菜单。就我而言，我在 5 秒后手动设置了截止时间。我遇到的是，当我将重新激活器放在我的案例块中时，它不会等待 setTimeout。还是两个调用同时触发，所以当 setTimeout 触发（也就是等待那五秒）时，下一个调用（重新激活器）也会触发？

另一个问题——也是我想在我的颜色触发时停用下拉菜单的原因——是我注意到当颜色触发时，如果我再次点击下拉菜单——也就是再次触发对它的调用，第二个调用将导致颜色无休止地触发（假设以某种方式创建了无限循环）。思考为什么？

 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');
});
4

1 回答 1

1

我认为您希望setTimeout暂停代码执行。不是setTimeout这样。它安排您传递给它的函数稍后执行并立即返回。

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

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

您会注意到这与将重新激活器放入内部完全相同，stopColors只是现在它没有硬编码stopColors（可能使函数更可重用？）。因此，这基本上是您希望重新激活器代码位于何处的样式问题。背后的机制setTimeout仍然是一样的。

请注意，javascript 是单线程的。这就是为什么函数喜欢setTimeout和XMLHTTPrequest表现它们的方式 - 继续执行 javascript 直到脚本结束，然后在稍后浏览器将执行给定的函数。如果您尝试暂停执行，则浏览器将没有处理时间来执行诸如绘制到屏幕或接受用户点击或下载 ajax 响应之类的操作。

于 2013-10-06T23:12:52.500 回答