Question

我创建了一个链接，当用户将鼠标悬停在其中时，会弹出一些图像，当它们悬停时，图像将消失。一切都工作得非常好，但是，当它们多次悬停在链接上时，图像将继续弹出，直到它完成，具体取决于它们悬停链接的次数。有没有办法延迟执行悬停事件以防止这种情况发生？我的代码在

之下

$('.my_link a').bind('mouseover', function () {
    var my_title = $(this).html();
    var title_width = parseInt($(this).width());
    var next = $(this).next();

    $.ajax({
        type: "POST",
        url: 'ajax/my_info_hover.php',
        data: {
            my_title: my_title
        }
    }).success(function (data) {
        //Disable mouseover from this class?
        $('.my_info_wrap').remove();
        $(next).html(data).css('left', title_width + 10 + 'px');
    });

}).mouseout(function () {
    //Enable mouseover again?
    $('.my_info_wrap').remove();
});

Answer 1

我会做这样的事情：

var element = '#elementId';

var enter = function () {
 console.log('entered');
 $(element).stop().fadeIn('fast');
}

var leave = function () {
 console.log('left');
 $(element).stop().fadeOut('slow');
}

$('.toHoverOn').hover(function(){leave()}, function(){enter()});

请注意，您可以替换单独的leave和enter函数，只需立即在回调中编写逻辑，即：

  var element = '#elementId';

    $('.toHoverOn').hover(function(){
      console.log('entered');
      $(element).stop().fadeOut('slow');
    }, function(){
       console.log('left');
       $(element).stop().fadeIn('fast');
    });

如果在'mouseenter / hover'和'mouseleave'事件中发生了很多事情，那么第一个会更有用。

Answer 2

$(document).ready(function () {
    var timer, $this;
    $('.my_link a').bind('mouseover', function () {
        clearTimeout(timer);
        $this = $(this);
        timer = setTimeout(function () {
           var anime_title = $this.html();
           var title_width = parseInt($this.width(), 10);
           var next = $this.next();

           $.ajax({
                type: "POST",
                url: 'ajax/my_info_hover.php',
                data: {
                    my_title: my_title
                }
            }).success(function (data) {
                //Disable mouseover from this class?
                $('.my_info_wrap').remove();
                $(next).html(data).css('left', title_width + 10 + 'px');
           });
           console.log("This works!");
        }, 1000); //function fires after 1000ms = 1s
    }).mouseout(function () {
        //Enable mouseover again?
        clearTimeout(timer);
        $('.my_info_wrap').remove();
    });
});

SetTimeout Function等待特定时间，然后执行其中的功能。 clearTimeout清除计时器。因此，每当用户在链接上悬停计时器开始时，如果他再次执行该计时器，则计时器将被清除并立即开始新的计时器。当然，当用户离开链接时，必须清除计时器。在上面的示例中，函数在1秒后触发。

但我更喜欢.on()而不是绑定。因此，您只需要用.on

替换bind

$('.my_link a').on('mouseover', function () {
    ...
}).mouseout(function() {
    ...
});

修改

在这里工作jsfiddle ...和another version使用.on（）而不是.bind（）

防止鼠标悬停重复多次悬停

2 个答案: