悬停时停止计时器答案

【问题标题】：Stop timer on hover悬停时停止计时器
【发布时间】：2012-02-07 16:41:10
【问题描述】：

无论如何，我都不是 JS 编码员。我知道足以让事情做我想做的事，但无法从头开始编码。我的问题是：

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

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

【问题讨论】：

标签： javascript jquery hover jquery-events

【解决方案1】：

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

【讨论】：

非常感谢！我会试试你的解决方案！

【解决方案2】：

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

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

然后使用：

clearTimeout(timer1)

【讨论】：

Diodeus，非常感谢您参加我的提问！我会把这段代码放在哪里？再说一次，我根本不是 JS 人。我花了 3 天时间才让翻转工作 =)

【解决方案3】：

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

【讨论】：

@THEDert - 由于您是新手，您是否意识到您应该通过点击所有您认为有帮助的答案的向上箭头来奖励帮助过您的人？您可以单击多个答案上的向上箭头。作为提出问题的人，您有责任选择“最佳答案”并通过单击箭头下方的复选标记（左上角或每个答案）来表明这一点。该复选标记将变为绿色，表示这是您选择的答案。遵循正确的程序，您将获得声誉积分，回答者将因提供帮助而获得奖励。
说我需要 15 个代表才能这样做。我一直在尝试 =)
@THEDert - 无论您的代表是什么，您都应该能够单击一个答案上的复选标记。

【解决方案4】：

应该这样做：

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

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

【讨论】：

感谢您抽出宝贵时间回复我的帖子

【解决方案5】：

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

【讨论】：