How to Pause Setinterval() Functions

How can I pause setInterval() functions?

You could use a flag to keep track of the status:

var output = $('h1');var isPaused = false;var time = 0;var t = window.setInterval(function() {  if(!isPaused) {    time++;    output.text("Seconds: " + time);  }}, 1000);
//with jquery$('.pause').on('click', function(e) {  e.preventDefault();  isPaused = true;});
$('.play').on('click', function(e) {  e.preventDefault();  isPaused = false;});

h1 {    font-family: Helvetica, Verdana, sans-serif;    font-size: 12px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h1>Seconds: 0</h1><button class="play">Play</button><button class="pause">Pause</button>

Stop setInterval call in JavaScript

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().

Pause and resume setInterval

Try this:

1- when you want to pause the timer, calculate the remaining milliseconds and store it somewhere then call clearInterval.

2- When you want to resume the timer, just make a call to setTimeout passing the remaining time stored in the previous step as the argument.

3- And in setTimeout's callback you should call setInterval again.

UPDATE: This is what you want, a changed version of javascript: pause setTimeout(); thanks to @Felix Kling

    function IntervalTimer(callback, interval) {
        var timerId, startTime, remaining = 0;
        var state = 0; //  0 = idle, 1 = running, 2 = paused, 3= resumed

        this.pause = function () {
            if (state != 1) return;

            remaining = interval - (new Date() - startTime);
            window.clearInterval(timerId);
            state = 2;
        };

        this.resume = function () {
            if (state != 2) return;

            state = 3;
            window.setTimeout(this.timeoutCallback, remaining);
        };

        this.timeoutCallback = function () {
            if (state != 3) return;

            callback();

            startTime = new Date();
            timerId = window.setInterval(callback, interval);
            state = 1;
        };

        startTime = new Date();
        timerId = window.setInterval(callback, interval);
        state = 1;
    }

Usage:

    var timer = new IntervalTimer(function () {
        alert("Done!");
    }, 5000);

    window.setTimeout(function () {
        timer.pause();
        window.setTimeout(function () {
            timer.resume();
        }, 5000);
    }, 2000);

How to toggle or pause setInterval in javascript

Try this one

let currentTime = new Date();let status = true;let interval = 1; // in secondslet dateFormat = { hour: 'numeric', minute:'numeric', second: 'numeric', hour12: true };
let clock = document.querySelector('#demo');    clock.innerHTML = currentTime.toLocaleString('en-US', dateFormat);
let timer = setInterval(    function () {        currentTime.setSeconds(currentTime.getSeconds() + interval);        clock.innerHTML = currentTime.toLocaleString('en-US', dateFormat);    }, interval * 1000);
let button = document.querySelector('#button');    button.addEventListener('click', onClick);
function onClick() {    if (!status) {        button.innerHTML = 'Stop timer';
        timer = setInterval(            function () {                currentTime.setSeconds(currentTime.getSeconds() + interval);                clock.innerHTML = currentTime.toLocaleString('en-US', dateFormat);            }, interval * 1000        );
        return;    }
    if (status) {        button.innerHTML = 'Start timer';        clearInterval(timer);    }
    status = !status;}

<p>A script on this page starts this clock:</p><p id="demo"></p>
<button id="button">Stop time</button>

How to pause setInterval for certain time in javascript?

Use named function instead of anonymous. The main idea is:

if(index == 8) // Be carefull - you have index = 8 in your code snippet now
{
  clearInterval(auto_refresh);
  // Do your stuff with divs
  auto_refresh = setInterval(yourFunctionName, 6000);
}

P.S.: Also if you use jQuery (as I understand from your script tag and post's tag list) you can use its Timer plugin

timer = $.timer(function() {
// your code
}, 1000, true);

You can pause the timer with timer.pause() and resume it with timer.play().

pause and resume setInterval in javascript

I edited your code here is your jsfiddle back: https://jsfiddle.net/yzfb8zow/5/

Also a little code explanation

var typingFunction = function() {
  if (index === strings.length) {
    index = 0;
  }

  if (type) {
    typeIt();
  } else {
    deleteIt();
  }
}

I declared your previous typing function to later be able to use it as desired.

var x = setInterval(typingFunction.bind(typingFunction), 200);

Stored the interval so I can clear it later - stored in a global variable (not necessarily ok and there are other solutions but store it).

function typeIt() {
 if (chIndex == -1) {
    chIndex += 1;
    clearAndRestartInterval(1000);
    return;
  }

  if (chIndex <= strings[index].length) {
    span.innerHTML = strings[index].substring(0, chIndex++);
  } else {
    clearAndRestartInterval(1000);
    type = false;
    return;
  }
}

In the typeIt function I clear interval at the begining at chIndex = -1, wait a while so letting the cursor blink before I restart the interval. Than I clear it again at the end of the string. My chIndex starts from -1 so I know when to blink at the begining.

Rest of the code is self explanatory.

Feel free to edit the parameter of the clearAndRestartInterval function in order to set the time of the blinking at the begining and the end.

function clearAndRestartInterval(timeOfRestart) {
    clearInterval(x);
    setTimeout(function() {
      x = setInterval(typingFunction.bind(typingFunction), 200);
    }, timeOfRestart);
}

Last but not least the stop and restart function of the interval. This is quite simple and x - is the previously declared setInterval - globally which I clear and reset with a new interval ofter some time.

Hope this helps.

Cheers

Pause document.ready setInterval with external function

You can try this

$( document ).ready(function() {
   var timer = window.setInterval(myAction, 1000);
   function pauseTimer() {
    clearInterval(timer )          
   }
   function playTimer() {
    timer = window.setInterval(myAction, 1000);         
   }
   function myAction(){
   console.info('myAction')
   }
   $("#play").click(function(){
     playTimer()
   });
   $("#pause").click(function(){
     pauseTimer()
   });
});

HTML

<div>
  <button id="play" >play</button>
  <button id="pause"  >pause</button>
</div>

How to pause setInterval with Angular?

Assuming you want to pause adding time to your currentTime, and not actually pause the interval:

Add an attribute to your class declaring the interval:

interval;

Store the interval in the attribute in your play function:

this.interval = setInterval(() => {
    this.currentTime = this.currentTime + 10;
    console.log(this.currentTime);
}, 1000);

In a pause function, clear the interval:

pauseTimeLine(value) {
    clearInterval(this.interval);
}

EDIT: Note that this is not very precise timing, but depending on the purpose of your code it could be workable.

---

Related Topics