Как остановить window.setInterval в javascript?

У меня есть функция javascript, которая вызывается каждые 2000 мс. Я хочу остановить это, поэтому я могу заставить пользователя делать другие вещи на странице, не вызывая его снова. Это возможно? Вот функция, которая вызывается каждые 2000 мсек:

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

Ответы

Ответ 1

Там нет встроенной функции "паузы", но вы можете остановить ее, а затем начать новый интервал с той же функцией.

Во-первых, вам нужно захватить идентификатор, возвращаемый вызовом setInterval:

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

Затем, когда вы хотите остановить это, позвоните

 window.clearInterval(intervalId);

В вашем случае я бы предложил определить setScreen самостоятельно, а не внутри вызова setInterval. Таким образом, вы можете просто использовать intervalId = window.setInterval(setScreen, 2000) когда хотите возобновить его.

Ответ 2

Если вы используете jQuery, я бы порекомендовал плагин jQuery Timer

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

Затем вы можете легко приостановить таймер:

timer.pause();

И также возобновите его:

timer.play();

Ответ 3

Это проще сделать, используя window.setTimeout() вместо window.setInterval(). Ниже приведен мой ответ здесь.

Live demo: 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();
}

Ответ 4

Вы не можете приостановить интервал, но вы можете остановить его и перезапустить.

var timer = setInterval(xx,tt);

// then some time later
clearInterval(timer);

Вам просто нужно взять возвращаемое значение из setInterval() и вызвать clearInterval() на нем, когда вы хотите его остановить.

Другой способ повторить, что вы можете прекратить повторять в любое время, - это повторить setTimeout(), а затем clearTimeout(), чтобы остановить следующий таймер или просто не запускать следующий setTimeout().

Ответ 5

Не повторяйте объявление

Просто добавьте класс, который сообщает интервалу ничего не делать. Например: при наведении указателя мыши.

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

<!-- 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>

Ответ 6

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

Ответ 7

Не используйте setInterval(), особенно когда речь идет о сетевых вызовах (XHR/fetch). Нет никакой гарантии, что ваш запрос будет выполнен вовремя, но setTimeout() не будет ждать setTimeout() следующего, открывающего все больше и больше соединений.

Просто используйте setTimeout(), который с помощью простого оператора if перенесет себя.


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

updateContent()