阻止 jQuery 做它的事情？

Posted 2023-02-22

【中文标题】阻止 jQuery 做它的事情？

【英文标题】：Stopping jQuery from doing its thing?

【发布时间】：2011-12-10 15:01:17

【问题描述】：

我有这个代码。

$(document).ready(function() 
$('#box').hide();
$(window).bind('scroll', function()
    if($(this).scrollTop() > 200) 
        $("#box").fadeIn(300);
    
    else 
    $("#box").fadeOut(300);
    
);
);

所以当我向下滚动 200 像素时，它会出现一个 div。当我向上滚动时，它会消失。这很好，直到我经常这样做。

如果我像疯子一样上下滚动，即使我停下来，div 也会不断地淡入淡出。这与这个实例无关，它在过去发生了很多，我一直想知道如何解决它（通过让它尽快停止，而不是每次我向上和向下滚动时都这样做)。

这可能吗？

【问题讨论】：

是的，好问题。我自己也想知道。

【参考方案1】：

jQuery 有一个 stop() 方法 - http://api.jquery.com/stop/

这篇文章描述了如何使用它，似乎正是您正在寻找的： http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

【讨论】：

它可以工作一段时间，但无论我在哪里停止，它似乎都很容易坏掉——最终它会完全停止淡入或淡出。

【参考方案2】：

使用stop^docs 函数

您只需分别致电$('#box').stop(true,true).fadeIn(300); 和$('#box').stop(true,true).fadeOut(300);

【参考方案3】：

您必须像这样在队列中添加停止功能： $('#box').stop(true).fadeOut(300);

函数 stop() 说明：see here

【参考方案4】：

在更多动画排队之前尝试使用 stop()：

$(document).ready(function() 
    $('#box').hide();
    $(window).bind('scroll', function()
        if($(this).scrollTop() > 200) 
            $("#box").stop().fadeIn(300);
        
        else 
            $("#box").stop().fadeOut(300);
        
    );
);

在此处查看文档：http://api.jquery.com/stop/

【参考方案5】：

.clearQueue() 比 .stop() 效果更好