CODEWITHSUNDEEP
javascriptajaxjquery
jibin dcruz
jibin dcruz

Reputation: 273

How to clear time out in javascript function

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

Answers (1)

T.J. Crowder
T.J. Crowder

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

Related Questions