Прекратить вызов setInterval в JavaScript

Если вы установите для возвращаемого значения setInterval значение переменной, вы можете использовать clearInterval, чтобы остановить его.

var myTimer = setInterval(...);
clearInterval(myTimer);

Вы можете установить новую переменную и увеличивать ее на ++ (подсчитывать один) каждый раз при ее запуске, тогда я использую условный оператор для его завершения:

var intervalId = null;
var varCounter = 0;
var varName = function(){
     if(varCounter <= 10) {
          varCounter++;
          /* your code goes here */
     } else {
          clearInterval(intervalId);
     }
};

$(document).ready(function(){
     intervalId = setInterval(varName, 10000);
});

Я надеюсь, что это поможет, и это правильно.

В приведенных выше ответах уже объяснено, как setInterval возвращает дескриптор и как этот дескриптор используется для отмены таймера интервала.

Некоторые архитектурные соображения:

Пожалуйста, не используйте переменные "без ограничений". Самый безопасный способ - использовать атрибут объекта DOM. Самым простым местом будет "документ". Если перезапуск запускается кнопкой запуска/остановки, вы можете сами использовать кнопку:

<a onclick="start(this);">Start</a>

<script>
function start(d){
    if (d.interval){
        clearInterval(d.interval);
        d.innerHTML='Start';
    } else {
        d.interval=setInterval(function(){
          //refresh here
        },10000);
        d.innerHTML='Stop';
    }
}
</script>

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

Уже ответил... Но если вам нужен многофункциональный таймер многократного использования, который также поддерживает несколько задач с разными интервалами, вы можете использовать мой TaskTimer (для узла и браузера).

// Timer with 1000ms (1 second) base interval resolution.
const timer = new TaskTimer(1000);

// Add task(s) based on tick intervals.
timer.add({
    id: 'job1',         // unique id of the task
    tickInterval: 5,    // run every 5 ticks (5 x interval = 5000 ms)
    totalRuns: 10,      // run 10 times only. (omit for unlimited times)
    callback(task) {
        // code to be executed on each run
        console.log(task.name + ' task has run ' + task.currentRuns + ' times.');
    }
});

// Start the timer
timer.start();

В вашем случае, когда пользователи нажимают за нарушение обновления данных; Вы можете вызвать timer.pause() затем timer.resume() если им нужно повторно включить.

Подробнее здесь.

@cnu,

Вы можете остановить интервал, когда попробуйте запустить код перед тем, как посмотреть консольный браузер ur (F12)... try comment clearInterval (триггер) снова выглядит консолью, а не украшением?: P

Проверьте пример источника:

var trigger = setInterval(function() { 
  if (document.getElementById('sandroalvares') != null) {
    document.write('<div id="sandroalvares" style="background: yellow; width:200px;">SandroAlvares</div>');
    clearInterval(trigger);
    console.log('Success');
  } else {
    console.log('Trigger!!');
  }
}, 1000);

<div id="sandroalvares" style="background: gold; width:200px;">Author</div>

Объявить переменную для назначения значения, возвращаемого из setInterval (...) и передать назначенную переменную clearInterval();

например.

var timer, intervalInSec = 2;

timer = setInterval(func, intervalInSec*1000, 30 ); // third parameter is argument to called function 'func'

function func(param){
   console.log(param);
}

//В любом месте, где вы получили доступ к таймеру, объявленному выше, вызов clearInterval

$('.htmlelement').click( function(){  // any event you want

       clearInterval(timer);// Stops or does the work
});

var keepGoing = true;
setInterval(function () {
     if (keepGoing) {
        //DO YOUR STUFF HERE            
        console.log(i);
     }
     //YOU CAN CHANGE 'keepGoing' HERE
  }, 500);

Вы также можете остановить интервал, добавив прослушиватель событий, чтобы, скажем, кнопка с идентификатором "stop-interval":

$('buuton#stop-interval').click(function(){
   keepGoing = false;
});

HTML:

<button id="stop-interval">Stop Interval</button>

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

Почему бы не использовать более простой подход? Добавьте класс!

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

var i = 0;
this.setInterval(function() {
  if(!$('#counter').hasClass('pauseInterval')) { //only run if it hasn't got this class 'pauseInterval'
    console.log('Counting...');
    $('#counter').html(i++); //just for explaining and showing
  } else {
    console.log('Stopped counting');
  }
}, 500);

/* In this example, I'm adding a class on mouseover and remove it again on mouseleave. You can of course do pretty much whatever you like */
$('#counter').hover(function() { //mouse enter
    $(this).addClass('pauseInterval');
  },function() { //mouse leave
    $(this).removeClass('pauseInterval');
  }
);

/* Other example */
$('#pauseInterval').click(function() {
  $('#counter').toggleClass('pauseInterval');
});

body {
  background-color: #eee;
  font-family: Calibri, Arial, sans-serif;
}
#counter {
  width: 50%;
  background: #ddd;
  border: 2px solid #009afd;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  transition: .3s;
  margin: 0 auto;
}
#counter.pauseInterval {
  border-color: red;  
}

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


<p id="counter">&nbsp;</p>
<button id="pauseInterval">Pause</button></p>

Я искал этот быстрый и легкий подход на века, поэтому я публикую несколько версий, чтобы представить как можно больше людей.