点击触发引发无限循环，如何实现两次触发跳过两步直达第四步？

你的代码出现无限循环的核心原因是：在active == '1'的分支里，你先将active设为0，然后调用jQuery(".next").trigger("click")——这会再次触发同一个点击事件处理函数，形成无终止的递归调用，最终导致浏览器陷入循环。

下面提供两种解决方案，优先推荐第一种（更稳定、无副作用）：

方案一：直接更新步骤状态（推荐） #

如果目标是从第一步直接跳转到第四步，最稳妥的方式是手动设置目标步骤的DOM状态和变量，而非依赖多次触发点击事件。这种方式可以彻底避免循环，同时减少不必要的事件触发副作用。

修改后的代码：

var active = -1;
jQuery('.next').click(function(event) {
    // 初始化active为当前激活的步骤
    if (active < 0) {
        active = jQuery('ul#checkout_timeline').find('li.active').data('step');
    }

    // 当前处于第一步，直接跳转到第四步
    if (active === 1) {
        // 1. 更新active变量为第四步
        active = 4;
        // 2. 更新时间线的激活状态：移除所有li的active类，给第四步的li添加active
        jQuery('ul#checkout_timeline li').removeClass('active');
        jQuery('ul#checkout_timeline li[data-step="4"]').addClass('active');
        // 3. 同步执行原next点击事件中的其他逻辑（比如表单切换、验证等）
        // 请根据你的实际业务补充这部分代码

        return false; // 阻止默认行为和事件冒泡，避免重复触发
    }

    // 原有的其他步骤跳转逻辑（比如正常的步骤前进）
    // ...
});

方案二：控制触发次数（依赖原有点击逻辑） #

如果你必须通过触发点击事件来完成跳转，可以添加一个触发次数计数器，限制仅触发指定次数的额外点击，从而终止循环。

修改后的代码：

var active = -1;
var triggerCount = 0; // 记录额外触发的点击次数

jQuery('.next').click(function(event) {
    // 初始化active为当前激活的步骤
    if (active < 0) {
        active = jQuery('ul#checkout_timeline').find('li.active').data('step');
    }

    // 当前处于第一步，且未完成两次额外触发
    if (active === 1 && triggerCount < 2) {
        triggerCount++;
        // 触发下一次点击
        jQuery(".next").trigger("click");
        // 更新active为最新激活的步骤
        active = jQuery('ul#checkout_timeline').find('li.active').data('step');
        
        // 完成两次触发后，强制跳转到第四步并重置计数器
        if (triggerCount === 2) {
            active = 4;
            jQuery('ul#checkout_timeline li').removeClass('active');
            jQuery('ul#checkout_timeline li[data-step="4"]').addClass('active');
            triggerCount = 0; // 重置计数器，避免后续点击异常
        }
        return false;
    }

    // 非第一步时，重置计数器
    if (active !== 1) {
        triggerCount = 0;
    }

    // 原有的其他步骤跳转逻辑
    // ...
});

注意事项 #

• 方案一的优势是直接、可控，不会引入额外的事件递归风险，建议优先使用。
• 如果原next点击事件包含表单验证、AJAX请求等逻辑，需要确保这些逻辑在直接跳转时也能正确执行（比如手动调用验证函数、触发必要的回调）。

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