函数立即执行，不等待setTimeout [英] Function executing instantly, not waiting for setTimeout

问题描述

我想在Colors(interval)触发时禁用下拉菜单.就我而言，我在5秒钟后手动设置了截止值.我遇到的是，当我将重新激活器放在case块中时，它不等待setTimeout.还是两个呼叫都同时触发，所以在setTimeout触发(也就是等待那五秒钟)的同时，下一个呼叫(重新激活器)也会触发?

I would like to disable my dropdown while my while Colors(interval) is firing. In my case I manually set a cutoff after 5 seconds. What I'm experiencing is that when I place the re-activator in my case block, it does not wait for the setTimeout. Or are both calls firing at the same time and so while the setTimeout is firing (aka waiting those five seconds) the next call (the re-activator) fires as well?

另一个问题，也是我想在我的颜色触发时停用下拉菜单的原因，是我注意到在颜色触发时，如果我再次单击该下拉菜单，则可以再次调用该调用，第二个调用将导致Colors不断触发(假设以某种方式创建了无限循环).关于为什么的想法?

The other question —and the reason I wanted to deactivate the dropdown while the my Colors is firing —is that I noticed that while the Colors was firing, if I clicked on the dropdown again —aka to fire off another call to it, the second call would result in Colors endlessly firing (assuming an infinite loops created somehow). Thoughts on why?

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

推荐答案

我认为您希望setTimeout暂停代码执行.那不是setTimeout所做的.它安排您传递给它的函数在以后执行并立即返回.

I think you're expecting setTimeout to pause code execution. That's not what setTimeout does. It schedules the function you pass to it to execute at a later time and returns immediately.

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

If you want to structure you code so that the reactivator is located near the switch statement rather than stopColors use an anonymous function:

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

您会注意到，这与将重新激活器放入stopColors中完全相同，不同之处在于，现在它没有在stopColors中进行硬编码(可能使该函数更可重用?).因此，从根本上讲，这是您希望重新激活器代码位于何处的样式问题. setTimeout背后的机制仍然起作用.

You will notice that this is exactly the same as putting the reactivator inside stopColors with the exception that now it is not hardcoded in stopColors (potentially making the function more reusable?). So it's basically a style issue of where you want the reactivator code to be. The mechanism behind setTimeout still works the same.

请注意，javascript是单线程的.这就是为什么像setTimeout和XMLHTTPrequest这样的函数会表现其行为的原因-继续执行javascript直到脚本结束，然后在以后的浏览器中将执行给定的函数.如果您尝试暂停执行，那么浏览器将没有处理时间来执行诸如绘制屏幕，​​接受用户点击或下载ajax响应之类的事情.

Do note that javascript is single threaded. Which is why functions like setTimeout and XMLHTTPrequest behave the way they do - continuing execution of javascript until the end of script and then at some later the browser will execute the given function. If you try to pause execution then the browser will not be given processing time to do things like draw to screen or accept user clicks or download ajax response.

这篇关于函数立即执行，不等待setTimeout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！