How to clear all javascript timeouts?

Question

I have a loop function that in the first 5 seconds starts social1() , and after 5 seconds it starts social2() , then the loop ...

I also have two hover functions

I need to clear all active timeouts, because when I am on images ( .social1 and .social2 ), I see that several timeouts are running

How to fix it?

 function social1() { $('.social1').fadeTo(500, 1); $('.social2').fadeTo(500, 0.5); timeout = setTimeout(function() { social2(); }, 5000); } function social2() { $('.social1').fadeTo(500, 0.5); $('.social2').fadeTo(500, 1); timeout = setTimeout(function() { social1(); }, 5000); } $(document).ready(function () { social1(); $('.social1').hover( function () { window.clearTimeout(timeout); social1(); }, function () { timeout = setTimeout(function() { social2(); }, 5000); } ); $('.social2').hover( function () { window.clearTimeout(timeout); social2(); }, function () { timeout = setTimeout(function() { social1(); }, 5000); } ); 

Answer 1

__ __ EDIT

To control the set of timeouts (and intervals) you can use the following snippet. This will clear any timeouts or intervals set anywhere in the code, although you need to set this snippet before setting any timeout or interval. Basically, before processing any javascript code or an external script that uses a timeout / interval.

JS:

 ;(function () { window.timeouts = {}, window.intervals = {}, window.osetTimeout = window.setTimeout, window.osetInterval = window.setInterval, window.oclearTimeout = window.clearTimeout, window.oclearInterval = window.clearInterval, window.setTimeout = function () { var args = _parseArgs('timeouts', arguments), timeout = window.osetTimeout.apply(this, args.args); window.timeouts[args.ns].push(timeout); return timeout; }, window.setInterval = function () { var args = _parseArgs('intervals', arguments), interval = window.osetInterval.apply(this, args.args); window.intervals[args.ns].push(interval); return interval; }, window.clearTimeout = function () { _removeTimer('timeouts', arguments); }, window.clearInterval = function () { _removeTimer('intervals', arguments); }, window.clearAllTimeout = function () { _clearAllTimer('timeouts', arguments[0]); }, window.clearAllInterval = function () { _clearAllTimer('intervals', arguments[0]); }; function _parseArgs(type, args) { var ns = typeof args[0] === "function" ? "no_ns" : args[0]; if (ns !== "no_ns")[].splice.call(args, 0, 1); if (!window[type][ns]) window[type][ns] = []; return { ns: ns, args: args }; } function _removeTimer(type, args) { var fnToCall = type === "timeouts" ? "oclearTimeout" : "oclearInterval", timerId = args[0]; window[fnToCall].apply(this, args); for (var k in window[type]) { for (var i = 0, z = window[type][k].length; i < z; i++) { if (window[type][k][i] === timerId) { window[type][k].splice(i, 1); if (!window[type][k].length) delete window[type][k]; return; } } } } function _clearAllTimer(type, ns) { var timersToClear = ns ? window[type][ns] : (function () { var timers = []; for (var k in window[type]) { timers = timers.concat(window[type][k]); } return timers; }()); for (var i = 0, z = timersToClear.length; i < z; i++) { _removeTimer(type, [timersToClear[i]]); } } }()); 

How to use it:

Set timeout (s) / interval (s) as usual:

 var test1 = setTimeout(function(){/**/, 1000); var test2 = setTimeout(function(){/**/, 1000); 

Then you can use to clean both:

 clearAllTimeout(); // clearAllInterval(); for intervals 

This will clear both timeouts ( test1 and test2 )

You can use some namespaces to remove only certain timers, for example:

 // first (optional) parameter for setTimeout/setInterval is namespace var test1 = setTimeout('myNamespace', function(){/**/, 1000); // 'myNamespace' is current namespace used for test1 timeout var test2 = setTimeout(function(){/**/, 1000); // no namespace used for test2 timeout 

Again, clearAllTimeout(); will clear both timeouts. To remove only one instance, you can use:

clearAllTimeout('myNamespace'); // clearAllInterval('myNamespace'); for namespaced intervals

This will clear only test1 timeout

For some reason, you can only remove intermediate timeouts without names. Then you can use:

clearAllTimeout('no_ns'); // clearAllInterval('no_ns'); for non namespaced intervals only

In this example, only test2 timeout will be cleared

See jsFiddle DEMO

__ END EDIT __

An old article specific to open the question here:

You can try the following:

 var timeouts = []; timeouts.push(setTimeout(function() { social2(); }, 5000)); timeouts.push(setTimeout(function() { social1(); }, 5000)); //etc... function clearAllTimeouts(){ for(var i = 0, z = timeouts.length; i < z; i++) clearTimeout(timeouts[i]); timeouts = []; } 

UPDATED after comment by David Thomas

 var timeouts = {'social' : [], 'antisocial' : []}; //a social timeout timeouts.social.push(setTimeout(function() { social1(); }, 5000)); //an anti-social timeout timeouts.antisocial.push(setTimeout(function() { antisocial1(); }, 5000)); function clearTimeouts(namespace){ for(var i = 0, z = timeouts[namespace].length; i < z; i++) clearTimeout(timeouts[namespace][i]); timeouts[namespace] = []; } //usage eg clearTimeouts("social"); 

Answer 2

 //Incase if you are looking for full fledged code var dict = {}; function checkForIntervals(id){ var index = index; var result = findOrAddProperty(id); if(result.length != 0){ clearTimeoutsFor(id); } dict[id].push(setTimeout(function(){alertFunc(id,index);}, 60000)); }; // to clear specific area timeout function clearTimeoutsFor(namespace){ for(var i = 0, z = dict[namespace].length; i < z; i++) clearTimeout(dict[namespace][i]); dict[namespace] = []; } to clear all timeouts function clearAllTimeOuts(){ for (key in dict) { for(var i = 0, z = dict[key].length; i < z; i++) clearTimeout(dict[key][i]); dict[key] =[]; } }; function findOrAddProperty(str){ var temp = []; for (key in dict) { if(key == str){ if (dict.hasOwnProperty(key)) { temp = dict[key]; break; } } } if(temp.length == 0){ dict[str] = []; } return temp; }; function alertFunc(id,index) { jQuery(document).ready(function($) { do the ajax call here after 1 min }); };