Javascript setInterval clearInterval 简单示例不起作用解释?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18957186/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 13:50:28  来源:igfitidea点击:

Javascript setInterval clearInterval Simple Example Not Working Explained?

javascriptsetintervalclearinterval

提问by user175328

I have a very simple JS setInterval and clearInterval example that doesn't work. There has got to be an underlying reason why it does not work and I would like to know why that is:

我有一个非常简单的 JS setInterval 和 clearInterval 示例,但它不起作用。为什么它不起作用一定有一个潜在的原因,我想知道这是为什么:

 var automessage;

 function turnON() //executed by onclick event A
 {
   var automessage = setInterval(function(){ something() }, 2000);
 }

 function turnOff() //executed by onclick event B
 {
   clearInterval(automessage);
 }

 function something()
 {
   //pulls instant messages
 }

In this example, an end-user clicks a button to start a timed interval process, clicks another button to stop the timed interval process, and then clicks the on button again to start the process again. Essentially, it would be an on/off styled process.

在此示例中,最终用户单击一个按钮以启动定时间隔过程,单击另一个按钮停止定时间隔过程,然后再次单击打开按钮以再次启动该过程。从本质上讲,这将是一个开/关风格的过程。

This doesn't work and I am trying to figure out why. I can make all of the hundreds of other examples offered on Stackoverflow to work, but I really need an on/off styled process that isn't limited to just on, and then off. The setInterval should be able to turn on and off at any time.

这不起作用,我想弄清楚原因。我可以使 Stackoverflow 上提供的所有数百个其他示例都可以工作,但我确实需要一个开/关风格的过程,它不仅限于打开然后关闭。setInterval 应该能够随时打开和关闭。

I really appreciate anyone's help. Also, I do not use any Jquery libraries.

我真的很感谢任何人的帮助。另外,我不使用任何 Jquery 库。

回答by Roy Miloh

automessageis declared twice - as a global variable and as a local variable. try:

automessage被声明两次 - 作为全局变量和局部变量。尝试:

function turnON() //executed by onclick event A
{
    automessage = setInterval(function(){ something() }, 2000);
}

回答by Niccolò Campolungo

var automessage;

function turnON() { //executed by onclick event A 
    automessage = setInterval(function(){ something() }, 2000);
}
function turnOff() { //executed by onclick event B
    clearInterval(automessage);
}
function something() {
    //pulls instant messages
}

This code should work. Yours isn't working because in the context of the turnONfunction you are always initializinga new variable called automessage, which obfuscates the global one. By not using varyou will be overriding the automessageglobal variable.

这段代码应该可以工作。你的不起作用,因为在turnON函数的上下文中,你总是初始化一个名为 的新变量automessage,它混淆了全局变量。如果不使用,var您将覆盖automessage全局变量。

automessageis a global variable, so it is editable from any other script. Since, IMHO, it shouldn't be possible, I'd recommend you to use a closure to encapsulateand make privatethe automessagevariable(something like a modular pattern should help you, see below).

automessage是一个全局变量,因此它可以从任何其他脚本进行编辑。因为,恕我直言,这不应该是可能的,我建议你使用了闭包来封装,使私人automessage变量(类似模块化模式可以帮助你,见下文)。

var buttonModule = (function() {
    var _automessage;
    function turnON() { //executed by onclick event A 
        _automessage = setInterval(_something, 2000);
    }
    function turnOFF() { //executed by onclick event B
        clearInterval(_automessage);
    }
    function _something() {
        //pulls instant messages
    }
    return {
        turnON: turnON,
        turnOFF: turnOFF
    };
})();

Then you can use it this way: buttonModule.turnON, buttonModule.turnOFFinside your click handlers.

然后你可以这样使用它: buttonModule.turnONbuttonModule.turnOFF在你的点击处理程序中。

回答by PavanBhushan

change

改变

var automessage = setInterval(function(){ something() }, 2000);

to

automessage = setInterval(function(){ something() }, 2000);

in turnON()

依次ON()