Stop setInterval call in JavaScript

Question

I am using setInterval fname  10000   to call a function every 10 seconds in JavaScript  Is it possible to stop calling it on some event    I want the user to be able to stop the repeated refresh of data

User · Answer

You can set a new variable and have it incremented by ++ (count up one) every time it runs, then I use a conditional statement to end it:

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

I hope that it helps and it is right.

User · Answer

In nodeJS you can you use the  quot this quot  special keyword within the setInterval function  You can use this this keyword to clearInterval  and here is an example  setInterval      function clear                 clearInterval this          return clear            1000   When you print the value of this special keyword within the function you outpout a Timeout object    Timeout

User · Answer

Already answered    But if you need a featured  re-usable timer that also supports multiple tasks on different intervals  you can use my TaskTimer  for Node and 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 your case  when users click for disturbing the data-refresh  you can also call timer pause   then timer resume   if they need to re-enable   See more here

User · Answer

If you set the return value of setInterval to a variable  you can use clearInterval to stop it   var myTimer   setInterval       clearInterval myTimer

User · Answer

Use setTimeOut to stop the interval after some time   var interVal   setInterval function   console log  Running       1000    setTimeout function  argument        clearInterval interVal      10000

User · Answer

clearInterval   Note  you can start and pause your code with this capability  The name is a bit deceptive  since it says  CLEAR  but it doesn t clear anything  It actually pauses  Test with this code  HTML   lt div id  count  gt 100 lt  div gt   lt button id  start  onclick  start    gt Start lt  button gt   lt button id  stop  onclick  stop    gt Stop lt  button gt   JavaScript   x000D   x000D  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   x000D   x000D   x000D

User · Answer

Why not use a simpler approach  Add a class   Simply add a class that tells the interval not to do anything  For example  on hover    x000D   x000D  var i   0  x000D  this setInterval function     x000D    if      counter   hasClass  pauseInterval        only run if it hasn t got this class  pauseInterval  x000D      console log  Counting       x000D          counter   html i       just for explaining and showing x000D      else   x000D      console log  Stopped counting    x000D      x000D     500   x000D   x000D     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    x000D      counter   hover function       mouse enter x000D        this  addClass  pauseInterval    x000D      function       mouse leave x000D        this  removeClass  pauseInterval    x000D      x000D     x000D   x000D     Other example    x000D      pauseInterval   click function     x000D        counter   toggleClass  pauseInterval    x000D      x000D  body   x000D    background-color   eee  x000D    font-family  Calibri  Arial  sans-serif  x000D    x000D   counter   x000D    width  50   x000D    background   ddd  x000D    border  2px solid  009afd  x000D    border-radius  5px  x000D    padding  5px  x000D    text-align  center  x000D    transition   3s  x000D    margin  0 auto  x000D    x000D   counter pauseInterval   x000D    border-color  red    x000D    x000D   lt  -- you ll need jQuery for this  If you really want a vanilla version  ask -- gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D   lt p id  counter  gt  amp nbsp  lt  p gt  x000D   lt button id  pauseInterval  gt Pause lt  button gt  lt  p gt  x000D   x000D   x000D    I ve been looking for this fast and easy approach for ages  so I m posting several versions to introduce as many people to it as possible

User · Answer

setInterval   returns an interval ID  which you can pass to clearInterval    var refreshIntervalId   setInterval fname  10000       later    clearInterval refreshIntervalId    See the docs for setInterval   and clearInterval

User · Answer

I guess the following code will help   var refreshIntervalId   setInterval fname  10000    clearInterval refreshIntervalId     You did the code 100  correct    So    What s the problem  Or it s a tutorial

User · Answer

This is how I used clearInterval   method to stop the timer after 10 seconds    x000D   x000D  function startCountDown     x000D    var countdownNumberEl   document getElementById  countdown-number    x000D    var countdown   10  x000D    const interval   setInterval      gt    x000D      countdown   --countdown  lt   0   10   countdown  x000D      countdownNumberEl textContent   countdown  x000D      if  countdown    1    x000D        clearInterval interval   x000D        x000D       1000  x000D    x000D   lt head gt  x000D     lt body gt  x000D       lt button id  countdown-number  onclick  startCountDown     gt Show Time  lt  button gt  x000D     lt  body gt  x000D   lt  head gt  x000D   x000D   x000D

User · Answer

cnu   You can stop interval  when try run code before look ur console browser  F12      try comment clearInterval trigger  is look again a console  not beautifier   P  Check example a source    x000D   x000D  var trigger   setInterval function      x000D    if  document getElementById  sandroalvares      null    x000D      document write   lt div id  sandroalvares  style  background  yellow  width 200px   gt SandroAlvares lt  div gt     x000D      clearInterval trigger   x000D      console log  Success    x000D      else   x000D      console log  Trigger      x000D      x000D     1000   x000D   lt div id  sandroalvares  style  background  gold  width 200px   gt Author lt  div gt  x000D   x000D   x000D

User · Answer

The clearInterval   method can be used to clear a timer set with the setInterval   method   setInterval always returns a ID value  This value can be passed in clearInterval   to stop the timer  Here is an example of timer starting from 30 and stops when it becomes 0     let time   30    const timeValue   setInterval  interval    gt      time   this time - 1    if  time  lt   0        clearInterval timeValue          1000

User · Answer

The answers above have already explained how setInterval returns a handle  and how this handle is used to cancel the Interval timer   Some architectural considerations   Please do not use  scope-less  variables  The safest way is to use the attribute of a DOM object  The easiest place would be  document   If the refresher is started by a start stop button  you can use the button itself    lt a onclick  start this    gt Start lt  a gt    lt script gt  function start d       if  d interval           clearInterval d interval           d innerHTML  Start         else           d interval setInterval function                refresh here           10000           d innerHTML  Stop            lt  script gt    Since the function is defined inside the button click handler  you don t have to define it again  The timer can be resumed if the button is clicked on again

User · Answer

Try  x000D   x000D  let refresch       gt   document body style   background        Math random   toString 16  slice -6    let intId   setInterval refresch  1000    let stop       gt  clearInterval intId   x000D  body  transition  1s  x000D   lt button onclick  stop    gt Stop lt  button gt  x000D   x000D   x000D

User · Answer

Declare variable to assign value returned from setInterval      and pass the assigned variable to clearInterval     e g   var timer  intervalInSec   2   timer   setInterval func  intervalInSec 1000  30       third parameter is argument to called function  func   function func param      console log param          Anywhere you ve access to timer declared above call clearInterval      htmlelement   click  function        any event you want         clearInterval timer     Stops or does the work

[javascript] Stop setInterval call in JavaScript

Examples related to javascript

Examples related to dom-events

Examples related to setinterval