Зупиніть встановити виклик інтернету в 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 повертає ручку і як ця ручка використовується для скасування таймера інтервалу.

Деякі архітектурні міркування:

Будь ласка, не використовуйте змінні "без області". Найбезпечніший спосіб - використовувати атрибут об’єкта 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 (тригер) - це знову подивитися консоль, а не красуня? : 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);

Ви також можете зупинити інтервал, додавши слухача події, щоб сказати кнопку з ідентифікатором "інтервал зупинки":

$('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>

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