Ik gebruik setInterval(fname, 10000);om elke 10 seconden een functie aan te roepen in JavaScript. Is het mogelijk om het op een evenement te stoppen?

Ik wil dat de gebruiker het herhaaldelijk vernieuwen van gegevens kan stoppen.

Antwoord 1, autoriteit 100%

setInterval()retourneert een interval-ID, die u kunt doorgeven aan clearInterval():

var refreshIntervalId = setInterval(fname, 10000);
/* later */
clearInterval(refreshIntervalId);

Bekijk de documenten voor setInterval()en clearInterval().

Antwoord 2, autoriteit 5%

Als u de retourwaarde van setIntervalinstelt op een variabele, kunt u clearIntervalgebruiken om deze te stoppen.

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

Antwoord 3, autoriteit 2%

Je kunt een nieuwe variabele instellen en deze laten verhogen met ++ (één optellen) elke keer dat deze wordt uitgevoerd, dan gebruik ik een voorwaardelijke instructie om deze te beëindigen:

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

Ik hoop dat het helpt en dat het goed is.

Antwoord 4

De bovenstaande antwoorden hebben al uitgelegd hoe setInterval een handle retourneert en hoe deze handle wordt gebruikt om de intervaltimer te annuleren.

Enkele architecturale overwegingen:

Gebruik geen “scope-less” variabelen. De veiligste manier is om het attribuut van een DOM-object te gebruiken. De gemakkelijkste plaats zou “document” zijn. Als de refresher wordt gestart door een start/stop-knop, kun je de knop zelf gebruiken:

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

Omdat de functie is gedefinieerd in de knop-klik-handler, hoeft u deze niet opnieuw te definiëren. De timer kan worden hervat als er opnieuw op de knop wordt geklikt.

Antwoord 5

Al beantwoord… Maar als je een uitgelichte, herbruikbare timer nodig hebt die ook meerdere taken met verschillende intervallen ondersteunt, kun je mijn TaskTimer(voor Node en browser).

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

In uw geval, wanneer gebruikers klikken om de gegevensverversing te verstoren; je kunt ook timer.pause()aanroepen en vervolgens timer.resume()als ze opnieuw moeten inschakelen.

Bekijk meer hier.

Antwoord 6

De methode clearInterval() kan worden gebruikt om een timerset met de methode setInterval() te wissen.

setInterval retourneert altijd een ID-waarde. Deze waarde kan worden doorgegeven in clearInterval() om de timer te stoppen.
Hier is een voorbeeld van een timer die begint bij 30 en stopt wanneer deze 0 wordt.

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

Antwoord 7

@cnu,

U kunt het interval stoppen, wanneer u code probeert uit te voeren voordat u uw consolebrowser (F12) bekijkt … probeer commentaar clearInterval(trigger) is nogmaals kijken een console, geen verfraaiing? 😛

Bekijk een voorbeeld van een bron:

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>

var timer, intervalInSec = 2;
timer = setInterval(func, intervalInSec*1000, 30 ); // third parameter is argument to called function 'func'
function func(param){
   console.log(param);
}

$('.htmlelement').click( function(){  // any event you want
       clearInterval(timer);// Stops or does the work
});

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>

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

setInterval(
    function clear() {
            clearInterval(this) 
       return clear;
    }()
, 1000)

var refreshIntervalId = setInterval(fname, 10000);
clearInterval(refreshIntervalId);

let refresch = ()=>  document.body.style= 'background: #'
  +Math.random().toString(16).slice(-6);
let intId = setInterval(refresch, 1000);
let stop = ()=> clearInterval(intId);

body {transition: 1s}

<button onclick="stop()">Stop</button>

<div id='count'>100</div>
<button id='start' onclick='start()'>Start</button>
<button id='stop' onclick='stop()'>Stop</button>

let count;
function start(){
 count = setInterval(timer,100)  /// HERE WE RUN setInterval()
}
function timer(){
  document.getElementById('count').innerText--;
}
function stop(){
  clearInterval(count)   /// here we PAUSE  setInterval()  with clearInterval() code
}

var interval = setInterval(timer, 100);
var n = 0;
function timer() {
  n = n + 0.1
  document.getElementById('show').innerHTML = n.toFixed(2)
}
function pause() {
  clearInterval(interval)
}
function resume(){
  interval = setInterval(timer, 100)
}

<h1 id="show">0</h1>
<button id="btn" onclick="pause()">STOP</button>
<button id="btn" onclick="resume()">RESUME</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>