jQuery菜单点击事件中openMenu内.each循环仅执行一次问题求助

• 问题根源是jQuery队列机制的使用错误：你使用.delay()和.queue()实现错开加类的效果时，队列任务执行完成后没有正确标记结束，也没有清理上一次执行残留的队列任务，导致第二次触发openMenu时队列被阻塞，内部代码不再执行。
• 直接操作jQuery的fx队列本身就容易出现状态残留问题，尤其是多次触发同一段动画逻辑的场景下，很容易出现仅首次执行生效的问题。

推荐直接用原生setTimeout替换jQuery队列实现，没有额外依赖，逻辑更稳定，不会出现执行一次就失效的问题：

function openMenu() {
    $(menuMain).addClass('open');
    $(menuWhite).addClass('open');
    $(menuLightblue).addClass('open');
    setTimeout(function() {
        $(menuLinks).each(function(i) {
            // 用原生setTimeout实现错开加类，无队列依赖问题
            setTimeout(() => {
                $(this).addClass('visible');
            }, 100 * i);
        });
        $(menuCircle).addClass('visible');
    }, 500);
};

如果要保留原有jQuery队列的写法，需要补充队列清理和任务结束标记：

function openMenu() {
    $(menuMain).addClass('open');
    $(menuWhite).addClass('open');
    $(menuLightblue).addClass('open');
    setTimeout(function() {
        $(menuLinks).each(function(i) {
            // stop(true)清空当前元素残留的所有队列任务
            $(this).stop(true).delay(100*i).queue( function(next) {
                $(this).addClass('visible');
                next(); // 标记当前队列任务完成，允许后续任务执行
            });
        });
        $(menuCircle).addClass('visible');
    }, 500);
};

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