Stop timer on hover

Question

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

Answer 1

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

Answer 2

You need to set your timer to a variable:

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

then use:

clearTimeout(timer1)