函数jquery的延迟

我在菜单上使用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);
    }
});

---

您可以查看此插件：如本问题所述

您可以查看此插件：如本问题所述

尝试在切换之前添加一个

延迟（）

和停止（）。

stop（）

将停止任何正在进行的动画，以防止几乎无休止的动画。而

delay（）

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

尝试在切换之前添加一个
delay（）
和stop（）。
stop（）
将停止任何正在进行的动画，以防止几乎无休止的动画。而
delay（）

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

您可以通过添加一个checker var并在超时时更改它来检查函数是否在最后一秒执行：

// 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)

});

您可以通过添加一个checker var并在超时时更改它来检查函数是否在最后一秒执行：

// 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)

});

如果我正确理解这个问题，我相信这就是你想要的

$(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");
    });
});

JSFIDLE

上述悬停代码仅在达到1000（1秒）的“冷却”后运行。或者，您可以在悬停退出时将
canMove
设置为true，这将确保每次悬停时代码只运行一次（即使这种情况已经发生）
 如果我正确理解了这个问题，我相信这就是你想要的

$(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");
    });
});

JSFIDLE

上述悬停代码仅在达到1000（1秒）的“冷却”后运行。或者，您可以在悬停退出时将
canMove
设置为true，这将确保每次悬停时代码只运行一次（即使这种情况已经发生）
 您可以检查元素是否正在制作动画：可能，您应该在重新激活它之前使用
.stop（）
函数停止动画。您可以检查元素是否正在制作动画：可能，您应该在重新激活它之前使用
.stop（）
函数停止动画。