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);
});

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);
});

• javascript
• jquery
• hover
• jquery-events

5 Answers 5

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);
   }
});

You need to set your timer to a variable:

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

then use:

clearTimeout(timer1)

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();
    });
});

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.

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