悬停时停止计时器

Stop timer on hover

本文关键字：计时器 悬停      更新时间：2023-09-26

无论如何，我都不是JS程序员。我知道足够多的东西来做我想做的事情，但不能从头开始编码。我的问题是：

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

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

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

您需要将计时器设置为一个变量：

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

然后使用：

clearTimeout(timer1)

您需要保存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();
    });
});

这应该做到：

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

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

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