Question

我有一个每2000毫秒调用一次的javascript函数。我想停止这一点，这样我就可以让用户在页面上做其他事情而不再调用它。这可能吗？这是每2000ms调用的函数：

window.setInterval(function getScreen (sid) {
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
            document.getElementById("refresh").innerHTML=xmlhttp.responseText;
          }
        }
        xmlhttp.open("POST","getScreen.php?sid="+<?php echo $sid; ?>,true);
        xmlhttp.send();
    },2000);

Answer 1

没有内置的“暂停”功能，但您可以将其停止，然后使用相同的功能启动新的间隔。

首先，您需要捕获调用setInterval：

返回的ID

let intervalId = window.setInterval(...);

然后当你想要停止它时，请致电

 window.clearInterval(intervalId);

在你的情况下，我建议单独定义setScreen，而不是在setInterval的调用内。这样，您可以在需要恢复时使用intervalId = window.setInterval(setScreen, 2000)。

Answer 2

如果您使用的是jQuery，我会推荐插件jQuery Timer

var timer = $.timer(function() {
  alert('This message was sent by a timer.');
}, 2000, true);

然后您可以轻松暂停计时器：

timer.pause();

并恢复它：

timer.play();

Answer 3

使用window.setTimeout()代替window.setInterval()可以更轻松地完成此操作。以下内容改编自我的回答here。

现场演示：http://jsfiddle.net/timdown/Hkzex/

代码：

function RecurringTimer(callback, delay) {
    var timerId, start, remaining = delay;

    this.pause = function() {
        window.clearTimeout(timerId);
        remaining -= new Date() - start;
    };

    var resume = function() {
        start = new Date();
        timerId = window.setTimeout(function() {
            remaining = delay;
            resume();
            callback();
        }, remaining);
    };

    this.resume = resume;

    this.resume();
}

Answer 4

您无法暂停间隔，但可以将其停止并重新启动。

var timer = setInterval(xx,tt);

// then some time later
clearInterval(timer);

您只需要从setInterval()获取返回值，并在想要停止时调用clearInterval()。

重复一次你可以随时停止重复的另一种方法是重复setTimeout()然后clearTimeout()停止下一个计时器或者不要开始下一个{ {1}}。

Answer 5

不要重新声明任何内容

只需添加一个告诉间隔不要做任何事情的类。例如：在悬停时。

＆＃13;

var i = 0;
window.setInterval(function() { //declare new function
  if(!$('#counter').hasClass('pauseInterval')) { //only run if it hasn't got this class 'pauseInterval'
    $('#showCount').html(i++); //just for explaining and showing
  }
}, 500);

$('#counter').hover(function() { //mouse enter
    $(this).addClass('pauseInterval');
    $('#counting').text('Stopped counting...');
  },function() { //mouse leave
    $(this).removeClass('pauseInterval');
    $('#counting').text('Counting...');
  }
);

＆＃13;

<!-- you'll need jQuery for this. If you really want a vanilla version, ask -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="counter"><span id="counting">Counting...</span> | <span id="showCount"></span></div>

＆＃13;

Answer 6

var intervalId = window.setInterval(code);
window.clearInterval(intervalId);

Answer 7

请勿使用setInterval()，尤其是在处理网络（XHR / fetch）呼叫时。不能保证您的请求会按时完成，但是setTimeout()迫不及待地启动下一个打开越来越多的连接。

只需使用一个setTimeout（），并使用一个简单的if语句重新安排自身的时间。


function updateContent() {
    someFunctionReturningAPromise()
        .then(() => {
            if (continue) {
                setTimeout(updateContent), 2000);
            }
        })
        .catch(e => console.log(e));
}

updateContent()

如何在javascript中停止window.setInterval？

7 个答案:

不要重新声明任何内容