如何清除jQuery mouseover #id上的setTimeout

Question

這是我當前運行系列setTimeout函數的代碼。 當鼠標移動或位於某個元素上方時，如何停止這些操作？

$( document ).ready(function() {  
  clicky()    
  function clicky() {
    setTimeout(function () {jQuery('#1500').trigger('click');}, 3000);
    setTimeout(function () {jQuery('#1990').trigger('click');}, 6000);
    setTimeout(function () {jQuery('#2010').trigger('click');}, 9000);
    setTimeout(function () {jQuery('#battle').trigger('click');}, 12000);
    setTimeout(function () {
      jQuery('#water').trigger('click');clicky()
    }, 15000);
  }    
});

Answer 1

您需要將setTimeout定義為一個變量，以便可以通過將其傳遞給clearTimeout()來清除它。 就像是：

var interval = setTimeout(function() {
    //msc
}, 8000);
window.clearTimeout(interval);

Answer 2

本質上，您需要保存對超時的引用，以便可以在需要時清除它們。 在下面的示例中，我僅使用一個對象，以便您可以指定想要影響的超時時間（如果需要）。

這是一個有效的小提琴，它將清除懸停時的超時，然后在鼠標離開時將其重置： http : //jsfiddle.net/6tQ4M/2/

和代碼：

$(function(){
    var timeouts = {};

    function setTimeouts () {
        timeouts['#1500'] = specifyTimeout('#1500', 3000);
        timeouts['#1990'] = specifyTimeout('#1990', 6000);
        timeouts['#2010'] = specifyTimeout('#2010', 9000);
        timeouts['#battle'] = specifyTimeout('#battle', 12000);
        timeouts['#water'] = specifyTimeout('#water', 15000, function(){
            console.log('reset the timeouts');
            clearTimeouts();
            setTimeouts();
        });
    }

    function clearTimeouts () {
        for(var key in timeouts){
            if(timeouts.hasOwnProperty(key)){
                clearTimeout(timeouts[key]);
                delete timeouts[key];
            }
        }
    }

    function specifyTimeout (id, time, callback) {
        return setTimeout(function(){
            $(id).trigger('click');
            if(callback){
                callback();
            }
        }, time);
    }

    $('a').on('click', function(){
        $('#projects').append('clicky clicky!');
    });

    $('#map').on('mouseover', clearTimeouts);
    $('#map').on('mouseleave', setTimeouts);

    setTimeouts();

});

讓我知道您是否對代碼有任何疑問！

Answer 3

好吧，根據訂購的內容，當您將鼠標懸停在某個區域時，應該觸發setTimeOut ，而當您不在該區域時，應該重置setTimeOut 。

這是代碼：

HTML

<div id="map"></div>

CSS

#map{
    width:100px;
    height:100px;
    background-color: black;
}

使用Javascript

var timeoutHandle;

$('#map').mouseover(function(event){
    window.clearTimeout(timeoutHandle);
});

$('#map').mouseout(function(event){
    timeoutHandle = window.setTimeout(function(){ alert("Hello alert!"); }, 2000);
});

基本上你應該保持在一個參考setTimeOut ，在這種情況下，變量是timeoutHandle ，呼吁clearTimeOut在鼠標並再次調用setTimeout的重置計時器。

這是jsFiddle：

http://jsfiddle.net/bernardo_pacheco/RBnpp/4/

相同的原理可以用於多個setTimeOut計時器。

您可以在此處查看更多技術細節：

重置setTimeout

希望能幫助到你。