繁体   English   中英

如何停止此jQuery setInterval函数

[英]how to stop this jquery setInterval function

我有一个计时器函数,当它低于1分钟时,调用此函数来刷新某些文本。 (基于此jsfiddle: http : //jsfiddle.net/8yned9f9/5/

$(document).ready(function(){
                setInterval(function(){
                    $('.flash').toggleClass('active');
                }, 500);
            });

分钟过后,我需要停止切换课程,并保持关闭.active的状态。 我不确定该怎么做。

请记住,有一个js window.setInterval计时器必须继续运行,只有jquery调用应该停止。

更新

根据此处的一些答案,我添加了一个变量,因此可以调用clearInterval(flash)

flash = setInterval(function(){
                            $('.flash').toggleClass('active');
                        }, 500);

只要停止发射间隔就可以了。 但是它停止在错误的状态。 有没有一种方法可以在停止间隔后删除.active类?

更新2,解决了通过快速搜索删除类的问题。

document.getElementById("seconds").classList.remove("active");

您需要将间隔分配给变量,然后使用该变量通过clearInterval停止它

var variable = setInterval(examplefunction, 10000);

clearInterval(variable);

编辑:

要删除该类,您需要执行以下操作:

$("yourelement").removeClass( ".active" );

setInterval函数返回一个间隔ID ,该ID将在您要停止间隔函数的情况下使用。 您可以通过使用id作为函数clearInterval的参数来停止它。

在您的示例中:

$(document).ready(function(){
    var intervalId = setInterval(function(){
        $('.flash').toggleClass('active');
    }, 500);
    // stop after 60 seconds
    setTimeOut(function() {
        clearInterval(intervalId);
    }, 60000)
});

setInterval函数属于window对象,与jquery不相关。 您可以在此处找到有关setInterval更多信息。

setInterval()返回一个id。 将此ID保存在某种全局变量中。

假设您将其保存到变量“ interval”。 然后,您可以通过调用clearInterval(interval)来停止clearInterval(interval)

最简单的方法是在脚本中添加一个条件:

$(document).ready(function () {
  var count = 1;
  setInterval(function () {
    if (count < 120) {
      $('.flash').toggleClass('active');
      count++;
    }
  }, 500);
});

但是,我不清楚,如果不执行任何操作,为什么要让setInterval继续。

var variable = setInterval(examplefunction,10000);

clearInterval(variable);

您可以设置一分钟后再处理另一个计时器,如下所示:

 $(document).ready(function(){ var id = setInterval(function(){ $('.flash').toggleClass('active'); }, 500); setTimeout(function () { clearInterval(id); // stop the setInterval $('.flash').addClass('active'); // make sure active is ON. }, 6000); // after 6 seconds (make this one minute if you want) }); 
 .flash {color: red} .flash.active {color: black} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="flash">Hello</div> 

出于说明目的,闪烁在6秒钟后停止。 根据需要进行调整。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM