如何清除jQuery鼠标悬停#id上的setTimeout

How to clear setTimeout on jQuery mouseover #id

本文关键字：悬停 鼠标 #id 上的 setTimeout jQuery 何清除 清除      更新时间：2023-10-03

这是我当前运行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);
  }    
});

您基本上需要保存对超时的引用，以便在需要时清除它们。在下面的示例中，我只使用了一个对象，这样您就可以根据需要指定要影响的超时。

这是一个工作小提琴，可以清除悬停时的超时，然后在鼠标离开时重置它们：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();
});

如果您对代码有任何疑问，请告诉我！

您的setTimeout需要定义为一个变量，以便通过传递给clearTimeout()来清除它。类似于：

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

好吧，根据您的命令，当您悬停在某个区域时，应该触发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

希望能有所帮助。

相关文章：