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>This is just what I would do, I'm not sure if you can actually pause the setInterval.
Note: This system is easy and works pretty well for applications that don't require a high level of precision, but it won't consider the time elapsed in between ticks: if you click pause after half a second and later click play your time will be off by half a second.
You shouldn't measure time in interval function. Instead just save time when timer was started and measure difference when timer was stopped/paused. Use setInterval only to update displayed value. So there is no need to pause timer and you will get best possible accuracy in this way.
While @Jonas Giuro is right when saying that:
You cannot PAUSE the setInterval function, you can either STOP it (clearInterval), or let it run
On the other hand this behavior can be simulated with approach @VitaliyG suggested:
You shouldn't measure time in interval function. Instead just save time when timer was started and measure difference when timer was stopped/paused. Use setInterval only to update displayed value.
var output = $('h1');var isPaused = false;var time = new Date();var offset = 0;var t = window.setInterval(function() { if(!isPaused) { var milisec = offset + (new Date()).getTime() - time.getTime(); output.text(parseInt(milisec / 1000) + "s " + (milisec % 1000)); }}, 10);//with jquery$('.toggle').on('click', function(e) { e.preventDefault(); isPaused = !isPaused; if (isPaused) { offset += (new Date()).getTime() - time.getTime(); } else { time = new Date(); }});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="toggle">Toggle</button>