views:

463

answers:

3

Im using jQuery and working on a notification system for my site. The notifications automatically fadeout using the setTimeout function.

How can i stop the timer of the setTimeout call?

For example i would like to pause the setTimeout call while the mouse is over the notification and continue the count down mouseout...

I googled "pause setTimeout" with no luck.

Im currently clearing the setTimeout call with clearTimeout and at same time fading out the notification on mouseout but it would be nice to have that pause effect.

Any ideas?

+4  A: 

Use clearTimeout() on mouseover event and use setTimeout() again on mouseout event.

http://www.w3schools.com/jsref/met_win_cleartimeout.asp

Haris
+1  A: 

Try this.

var myTimeOut;
$(someElement).mouseout( function () {
  myTimeOut = setTimeout("mytimeoutfunction()", 5000)
});

$(someElement).mouseover( function () {
  clearTimeout(myTimeOut);
});
John Hartsock
Thanks for the reply, i like this solution better. I'll also add a click event to clear everything and fade the message away as well.
Pablo
wow. When did SO become 'writemycodezforme'?
fig
Fig, It was an easy thing to write. Clearly this was understood by Pablo and he was able to use it, modify it, and apply what he learned.
John Hartsock
Yeah but you didn't answer when SO became writemycodezforme. It's become a great resource for outsourcing development.
fig
@fig i can't understand your concern but either way just because i have a reputation of 34 here doesn't mean i'm a noob. I personally use SO to get ideas and advices to guide me in the right direction is not like i asked "Yo bato i want a function to pause something in a webpage from happening and then make it happen".
Pablo
@Pablo, no one called you a noob (though your question does imply you're a js noob - but there's nothing wrong with that since everyone goes through a noob stage). That said, I find it funny how often people will post drop-in chunks of code, as opposed to simply pointing out a direction.
fig
@fig then im a noob who was understood and actually made a real question with knowledge on the subject... im good with that.
Pablo
@pablo, lol, okay. Good to know.
fig
+2  A: 

It wouldn't be too hard to add a PausableTimeout class:

(Might not be valid JS, but it shouldn't be too hard to get it working):

    function PausableTimeout(func, millisec) {
        this.func = func;
        this.stTime = new Date().valueOf();
        this.timeout = setTimeout(func, millisec);
        this.timeLeft = millisec;
    }
    function PausableTimer_pause() {
        clearTimeout(self.timeout);
        var timeRan = new Date().valueOf()-this.stTime;
        this.timeLeft -= timeRan;
    }
    function PausableTimer_unpause() {
        this.timeout = setTimeout(this.func, this.timeLeft);
        this.stTime = new Date().valueOf();
    }
    PausableTimer.prototype.pause = PausableTimer_pause;
    PausableTimer.prototype.unpause = PausableTimer_unpause;

    //Usage:
    myTimer = new PausableTimer(function(){alert("It works!");}, 2000);
    myTimer.pause();
    myTimer.unpause();

Of course, it'd be a great idea to add some error checking in there (don't want it to be possible to unpause the timeout multiple times and end up with hundreds of timeouts!), but I'll let that be your job :P

Wallacoloo