CODEWITHSUNDEEP
javascriptjquerysettimeout
wayne-m
wayne-m

Reputation: 45

How to clear setTimeout on jQuery mouseover #id

This is my current code to run the series of setTimeout functions. How do I stop these when either the mouse moves, or is over a certain element?

$( document ).ready(function() {  
  clicky()    
  function clicky() {
    setTimeout(function () {jQuery('#1500').trigger('click');}, 3000);
    setTimeout(function () {jQuery('#1990').trigger('click');}, 6000);
    setTimeout(function () {jQuery('#2010').trigger('click');}, 9000);
    setTimeout(function () {jQuery('#battle').trigger('click');}, 12000);
    setTimeout(function () {
      jQuery('#water').trigger('click');clicky()
    }, 15000);
  }    
});

Upvotes: 0

Views: 2367

Answers (3)

Bernardo Pacheco
Bernardo Pacheco

Reputation: 1445

Well, according to what you ordered, when you hover an area, the setTimeOut should be fired, and when you are out of this region, the setTimeOut should be reset.

This is the code:

HTML

<div id="map"></div>

CSS

#map{
    width:100px;
    height:100px;
    background-color: black;
}

Javascript

var timeoutHandle;

$('#map').mouseover(function(event){
    window.clearTimeout(timeoutHandle);
});

$('#map').mouseout(function(event){
    timeoutHandle = window.setTimeout(function(){ alert("Hello alert!"); }, 2000);
});

Basically you should keep a reference to the setTimeOut, in this case the variable is timeoutHandle, call clearTimeOut on mouse over and call setTimeOut again to reset the timer.

Here is the jsFiddle:

http://jsfiddle.net/bernardo_pacheco/RBnpp/4/

The same principle can be used for more than one setTimeOut timer.

You can see more technical details here:

Resetting a setTimeout

Hope it helps.

Upvotes: 0

Matthew Blancarte
Matthew Blancarte

Reputation: 8301

You essentially need to save a reference to your timeouts so that they can be cleared when you need them to be. In the following example, I just used an object so that you could specify which timeout you wanted to affect, if desired.

Here's a working fiddle that will clear the timeouts on hover, then reset them when the mouse leaves: http://jsfiddle.net/6tQ4M/2/

And the code:

$(function(){
    var timeouts = {};

    function setTimeouts () {
        timeouts['#1500'] = specifyTimeout('#1500', 3000);
        timeouts['#1990'] = specifyTimeout('#1990', 6000);
        timeouts['#2010'] = specifyTimeout('#2010', 9000);
        timeouts['#battle'] = specifyTimeout('#battle', 12000);
        timeouts['#water'] = specifyTimeout('#water', 15000, function(){
            console.log('reset the timeouts');
            clearTimeouts();
            setTimeouts();
        });
    }

    function clearTimeouts () {
        for(var key in timeouts){
            if(timeouts.hasOwnProperty(key)){
                clearTimeout(timeouts[key]);
                delete timeouts[key];
            }
        }
    }

    function specifyTimeout (id, time, callback) {
        return setTimeout(function(){
            $(id).trigger('click');
            if(callback){
                callback();
            }
        }, time);
    }

    $('a').on('click', function(){
        $('#projects').append('clicky clicky!');
    });

    $('#map').on('mouseover', clearTimeouts);
    $('#map').on('mouseleave', setTimeouts);

    setTimeouts();

});

Let me know if you have any questions about the code at all!

Upvotes: 2

Stuart Kershaw
Stuart Kershaw

Reputation: 17671

Your setTimeout needs to be defined to a variable, so that it can be cleared by passing to clearTimeout(). Something like: 

var interval = setTimeout(function() {
    //msc
}, 8000);
window.clearTimeout(interval);

Upvotes: 2

Related Questions