如何让jQuery animate动画完成后再响应后续点击？

核心思路是维护一个点击请求队列，把用户的每一次点击都记录下来，等前一个动画完全结束后，再依次执行队列里的后续操作——既避免动画叠加导致布局错乱，又能让快速点击的操作都得到响应。

修改后的代码如下：

// 初始化点击队列与动画状态标记
let clickQueue = [];
let isAnimating = false;

$(document).on('click','#right',function(){
    // 每次点击都加入请求队列
    clickQueue.push(true);
    // 尝试处理队列中的请求
    processQueue();
});

function processQueue(){
    // 若正在执行动画或队列已空，直接返回
    if(isAnimating || clickQueue.length === 0) return;
    
    // 标记动画开始状态
    isAnimating = true;
    // 取出队列中的第一个请求
    clickQueue.shift();
    
    $('#slider').animate(
        {'margin-left': '-=200px'},
        { 
            duration:1100,
            easing:'easeOutElastic',
            queue: false,
            complete:function(){
                // 动画结束后取消状态标记
                isAnimating = false;
                // 自动处理队列中的下一个请求
                processQueue();
            }
        }
    );
    sliderPosition++;   
}

代码说明 #

• clickQueue：用来存储用户的所有点击请求，不管当前是否有动画在运行，点击都会被记录下来
• isAnimating：标记当前是否有动画正在执行，防止多个动画同时触发导致布局错乱
• processQueue：负责按顺序处理队列中的请求，只有当没有动画且队列不为空时，才会执行动画；动画完成后会自动递归调用自身，处理下一个点击请求

这样修改后，用户快速点击的每一次操作都会被按顺序执行，既保证了动画的稳定性，又提升了操作的响应体验。

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