Reputation: 273
I have two javascript functions and both work on click event. For each functions i have used set time out property. The problem is if first function is called and second function is called both timeouts are activated together. Is there any way to disable the timer of one function when one is enabled.
SCRIPT:
function overall(){
$(".one").show();
$(".two").hide();
$(".three").hide();
$(".four").hide();
setTimeout(overall,1000);
}
function mobile(){
$(".one").hide();
$(".two").show();
$(".three").hide();
$(".four").hide();
setTimeout(mobile,1000);
}
If this is the scenario what am i supposed to do? because both functions will be activated and i do not know how to turn off the time out when one is enabled
Upvotes: 0
Views: 736
Reputation: 1075925
setTimeout
returns a value (a "timer handle"), which is a number other than 0
. You can cancel the timer by passing that value to clearTimeout
before the timeout occurs.
So you can remember the timer handle for one or both of the timers you've scheduled (depending on what you need), and when something happens that makes you want to cancel one of those timers, call clearTimeout
with the relevant handle.
You've asked for an example. Since it's still completely unclear to me what you want to cancel when, I'll take a guess: You want a call to overall
to cancel any pending call to mobile
and vice-versa:
// Variables to hold the timers
var overallTimer = 0,
mobileTimer = 0;
function overall(){
// If a pending call to mobile exists, cancel it
if (mobileTimer) {
clearTimeout(mobileTimer);
mobileTimer = 0;
}
$(".one").show();
$(".two").hide();
$(".three").hide();
$(".four").hide();
// Schedule a call to ourselves, remember the timer handle
overallTimer = setTimeout(overall,1000);
}
function mobile(){
// If a pending call to overall exists, cancel it
if (overallTimer) {
clearTimeout(overallTimer);
overallTimer = 0;
}
$(".one").hide();
$(".two").show();
$(".three").hide();
$(".four").hide();
// Schedule a call to ourselves, remember the timer handle
mobileTimer = setTimeout(mobile,1000);
}
You could store the timers on the functions if you liked, although it doesn't really buy you much:
function overall(){
// If a pending call to mobile exists, cancel it
if (mobile.timer) {
clearTimeout(mobile.timer);
mobile.timer = 0;
}
$(".one").show();
$(".two").hide();
$(".three").hide();
$(".four").hide();
// Schedule a call to ourselves, remember the timer handle
timer = setTimeout(overall,1000);
}
overall.timer = 0;
function mobile(){
// If a pending call to overall exists, cancel it
if (overall.timer) {
clearTimeout(overall.timer);
overall.timer = 0;
}
$(".one").hide();
$(".two").show();
$(".three").hide();
$(".four").hide();
// Schedule a call to ourselves, remember the timer handle
mobile.timer = setTimeout(mobile,1000);
}
mobile.timer = 0;
Upvotes: 3