悬停时停止计时器

时间:2012-02-07 16:41:11

标签: javascript javascript-events hover

我不是JS编码器。我知道足够让事情做我想做的事,但无法从头开始编码。我的问题是:

我们有一个购物车,当您添加产品时,购物车会显示自己4秒钟,除非客户将鼠标悬停在购物车上。当光标悬停在它上面时,我似乎无法让它停止超时。

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

5 个答案:

答案 0 :(得分:5)

setTimeout()的返回值存储在变量中,然后将其用于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);
   }
});

答案 1 :(得分:2)

您需要将计时器设置为变量:

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

然后使用:

clearTimeout(timer1)

答案 2 :(得分:1)

您需要保存setTimeout()的返回值,以便以后可以将其与clearTimeout()一起使用。一种方法就是这样:

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

如果您想在鼠标再次离开购物车时重新启用计时器(假设购物车为#ctl00_ctl00_ctlHeader_divOrderProducts),您可以这样做:

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

答案 3 :(得分:1)

这应该这样做:

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

将超时保存为变量,然后在将鼠标悬停在购物车上并传入超时时调用clearTimeout。

答案 4 :(得分:0)

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