如何限制slideToggle触发时机？解决连续点击动画队列堆积问题

问题场景：快速点击触发slideToggle()的按钮时，目标元素会根据点击次数连续展开/闭合，即使停止点击，也会执行完所有积累的动画操作。当前代码如下：

$("#examplebutton1").click(function()
{
    $("#examplecontent1").slideToggle(500);
});

要实现仅当元素完全展开或闭合（无动画执行中）时才响应点击，可以通过以下方式解决：

方案1：判断元素是否处于动画状态 #

$("#examplebutton1").click(function() {
    const $content = $("#examplecontent1");
    // 仅当元素未在执行动画时，触发slideToggle
    if (!$content.is(":animated")) {
        $content.slideToggle(500);
    }
});

方案2：清空动画队列（可选） #

如果希望点击时立即终止当前动画并切换状态，可以用stop(true, true)强制清空动画队列并完成当前动画，适合需要即时响应点击的场景：

$("#examplebutton1").click(function() {
    $("#examplecontent1").stop(true, true).slideToggle(500);
});

说明 #

• is(":animated")用于检测目标元素是否正在执行动画，通过这个判断可以严格限制只有动画完成后才响应下一次点击，彻底避免动画积累。
• 方案2的stop(true, true)第一个参数清空未执行的动画队列，第二个参数让当前动画直接跳转到结束状态，实现点击即切换的效果。

内容的提问来源于stack exchange，提问作者Somur