jquery - 延迟函数jquery

Question

我在菜单上有 jquery 悬停效果，它工作正常，但如果你将鼠标移动到项目上的速度快几倍，那么动画就会继续你进入该区域的次数，抱歉，如果我无法解释我的问题如我所愿，我需要的是某种延迟，因此如果您多次移动鼠标，该功能将仅触发一次，然后您等待 1 秒以再次获得效果。谢谢！

$(".border").hover(function(){
    if($(this).next('.sous_menu').is(':visible')){
        $('.sous_menu').closest('.border').removeClass('border').addClass('border_active');
    }else{
        $(this).toggleClass('border_active border', 500);
    }
});

http://jsfiddle.net/xb8Ss/9/

Answer 1

你可以看看这个插件：hoverIntent jQuery Plug-in as describe in this question Delay jquery hover event?

Answer 2

尝试delay()在切换之前添加 a 和 stop() 。这stop()将停止任何正在进行的动画，从而阻止几乎无穷无尽的动画。而这delay()将延迟它你放多少毫秒。

$(this).stop()delay(1000).toggleClass('border_active border', 500);

Answer 3

如果我正确理解了这个问题，我相信这就是您要寻找的...

$(document).ready(function() {
    var canMove = true;

    $("#moveme").hover(function() {
        if(canMove) {
            canMove = false;

            $(this).css("left", "50px");
            setTimeout(function() { canMove = true; }, 1000);
        }
    }, function() {
        $(this).css("left", "10px");
    });
});

jsfiddle在这里

上面的悬停代码只会在达到 1000（1 秒）的“冷却时间”后运行。或者，您可以canMove在悬停退出时设置为 true，这将确保代码在每次悬停时只运行一次（即使情况已经如此）。

Answer 4

您可以通过添加检查器变量并在超时时对其进行更改来检查函数是否已在最后一秒执行：

// the first time should always be allowed
var allow = true

$(".border").hover(function(){

    // if 'allow' is false, return without doing anything
    if(!allow) {
        return;
    }

    // the function is now gonna execute, don't allow
    // other events from executing the function
    allow = false;


    // executing the function
    if($(this).next('.sous_menu').is(':visible')){
        $('.sous_menu').closest('.border').removeClass('border').addClass('border_active');
    }else{
        $(this).toggleClass('border_active border', 500);
    }


    // after a second of the execution of the function, set allow to
    // true again to allow other events from executing the function
    setTimeout(function() {
        allow = true
    }, 1000)

});