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

Я использую setInterval(fname, 10000);для вызова функции каждые 10 секунд в JavaScript. Можно ли перестать называть это на каком-то событии?

Я хочу, чтобы пользователь мог остановить повторное обновление данных.

setInterval()возвращает идентификатор интервала, который вы можете передать clearInterval():

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

Смотрите документы для setInterval()и clearInterval().

Если вы установите возвращаемое значение 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 возвращает дескриптор, и как этот дескриптор используется для отмены таймера интервала.

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

Пожалуйста, не используйте переменные "scope-less". Самый безопасный способ - использовать атрибут объекта 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.');
        // stop the timer anytime you like
        if (someCondition()) timer.stop();
        // or simply remove this task if you have others
        if (someCondition()) timer.remove(task.id);
    }
});

// Start the timer
timer.start();

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

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

Метод clearInterval () можно использовать для очистки таймера, установленного с помощью метода setInterval ().

setInterval всегда возвращает значение идентификатора. Это значение может быть передано в clearInterval (), чтобы остановить таймер. Вот пример таймера, который начинается с 30 и останавливается, когда он становится равным 0.

  let time = 30;
  const timeValue = setInterval((interval) => {
  time = this.time - 1;
  if (time <= 0) {
    clearInterval(timeValue);
  }
}, 1000);

@cnu,

Вы можете остановить интервал, когда попробуйте запустить код, прежде чем смотреть консольный браузер (F12) ... попробуйте комментарий clearInterval (триггер) - это снова выглядит консоль, а не beautifier? :П

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

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>

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

Вот как я использовал метод clearInterval (), чтобы остановить таймер через 10 секунд.

function startCountDown() {
  var countdownNumberEl = document.getElementById('countdown-number');
  var countdown = 10;
  const interval = setInterval(() => {
    countdown = --countdown <= 0 ? 10 : countdown;
    countdownNumberEl.textContent = countdown;
    if (countdown == 1) {
      clearInterval(interval);
    }
  }, 1000)
}

<head>
  <body>
    <button id="countdown-number" onclick="startCountDown();">Show Time </button>
  </body>
</head>

Используйте setTimeOut, чтобы остановить интервал через некоторое время.

var interVal = setInterval(function(){console.log("Running")  }, 1000);
 setTimeout(function (argument) {
    clearInterval(interVal);
 },10000);

Я думаю, следующий код поможет:

var refreshIntervalId = setInterval(fname, 10000);

clearInterval(refreshIntervalId);

Вы сделали код на 100% правильным ... Итак ... В чем проблема? Или это учебник ...

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

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

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>

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