CODEWITHSUNDEEP
javascriptjqueryhoverjquery-events
THEDert
THEDert

Reputation: 59

Stop timer on hover

I'm not a JS coder my any means. I know enough to make things do what I want, but couldn't code from scratch. My issue is:

We have a shopping cart that when you add a product the cart shows itself for 4 secs unless the customer hovers over the cart. I can't seem to get it to stop the timeout when the cursor is hovered over it.

$(document).ready(function () {
    setTimeout(function () { $('#ctl00_ctl00_ctlHeader_divOrderProducts').hide(); }, 4000);
});

Upvotes: 3

Views: 3601

Answers (5)

Vivek Chandra
Vivek Chandra

Reputation: 4358

var timer = window.setTimeout(function () {
 $('#ctl00_ctl00_ctlHeader_divOrderProducts').hide();
if(someCondition)clearTimeout(timer);
}

Upvotes: 0

jfriend00
jfriend00

Reputation: 707856

You need to save the return value of setTimeout() so you can later use it with clearTimeout(). One way to that is like this:

$(document).ready(function () {
    var hideTimer = setTimeout(function () {
        $('#ctl00_ctl00_ctlHeader_divOrderProducts').hide(); 
    }, 4000);
    $('#ctl00_ctl00_ctlHeader_divOrderProducts').hover(function() {
        if (hideTimer) {
            clearTimeout(hideTimer);
            hideTimer = null;
        }
    });
});

If you want to re-enable the timer when the mouse leaves the cart again (assuming #ctl00_ctl00_ctlHeader_divOrderProducts is the cart), you can do so like this:

$(document).ready(function () {
    var hideTimer;

    function delayHideCart() {
        if (!hideTimer) {
            hideTimer = setTimeout(function () {
                $('#ctl00_ctl00_ctlHeader_divOrderProducts').hide(); 
            }, 4000);        
        }
    }

    delayHideCart();
    $('#ctl00_ctl00_ctlHeader_divOrderProducts').hover(function() {
        if (hideTimer) {
            clearTimeout(hideTimer);
            hideTimer = null;
        }
    }, function() {
        delayHideCart();
    });
});

Upvotes: 2

Richard Dalton
Richard Dalton

Reputation: 35793

This should do it:

$(document).ready(function () {
    var timeout = setTimeout(function () { $('#ctl00_ctl00_ctlHeader_divOrderProducts').hide(); }, 4000);
    $('#ctl00_ctl00_ctlHeader_divOrderProducts').mouseover(function() { 
         clearTimeout(timeout);
    });
});

You save the timeout as a variable and then call clearTimeout when you mouseover the cart and pass in that timeout.

Upvotes: 1

Michael Berkowski
Michael Berkowski

Reputation: 270707

Store the return of setTimeout() in a variable, and use that to clearTimeout():

// t is a global scope variable.
// Probably a good idea to use something better than 't'
var t;
$(document).ready(function () {
  // Store the return of setTimeout()
  t = setTimeout(function () { $('#ctl00_ctl00_ctlHeader_divOrderProducts').hide(); }, 4000);
});

$('cart-selector').hover(function() {
   if (t) {
    // Call clearTimeout() on hover()
    clearTimeout(t);
   }
});

Upvotes: 6

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

You need to set your timer to a variable:

var timer1 = setTimeout(function () { ... })

then use:

clearTimeout(timer1)

Upvotes: 2

Related Questions