如何在jQuery.each循环中检查并终止运行中的easytimer定时器

你的核心需求是同一时间仅允许一个定时器运行，现有代码的问题在于每个定时器都是each循环里的局部变量，互相之间没有关联，无法追踪和控制其他定时器的状态。我们需要一个全局的集合来管理所有定时器实例，这样就能在启动新定时器前统一检查并停止其他运行中的定时器。

具体实现步骤： #

• 声明一个全局数组存储所有定时器实例，方便后续遍历管理
• 创建每个定时器时，将其加入这个全局数组
• 点击启动按钮时，先遍历全局数组，停止所有正在运行的定时器
• 最后启动当前点击对应的定时器

修改后的完整代码： #

// 全局数组，用来统一管理所有定时器实例
let allTimers = [];

$('tr.step').each(function (index) {
    const $currentRow = $(this);
    // 精准获取当前行内的按钮和定时器显示元素，避免跨元素绑定错误
    const btnStart = $currentRow.find('.btn-start');
    const btnStop = $currentRow.find('.btn-stop');
    const valTimer = $currentRow.find('.timer-display');

    const timer = new easytimer.Timer();
    // 将当前定时器加入全局管理数组
    allTimers.push(timer);

    btnStart.off('click').on('click', (event) => {
        event.preventDefault();
        
        // 遍历所有定时器，停止正在运行的实例
        allTimers.forEach(t => {
            if (t.isRunning()) {
                t.stop();
                // 可选：停止其他定时器后，恢复对应行的按钮状态
                const targetRow = $(t._rowRef);
                targetRow.find('.btn-stop').hide();
                targetRow.find('.btn-start').show();
            }
        });

        // 启动当前定时器（避免重复启动）
        if (!timer.isRunning()) {
            timer.start({
                callback: function (timerInstance) {
                    valTimer.html(timerInstance.getTimeValues().toString());
                }
            });
            btnStart.hide();
            btnStop.fadeIn(1000);
        }
    });

    btnStop.off('click').on('click', (event) => {
        event.preventDefault();
        timer.stop();
        btnStop.hide();
        btnStart.show(); // 停止后恢复启动按钮显示
    });

    // 给定时器绑定当前行的引用，方便后续操作对应按钮
    timer._rowRef = $currentRow[0];
});

关键细节说明： #

• 全局定时器数组：allTimers作为统一管理容器，让我们能随时遍历检查所有定时器的运行状态
• 精准元素选择：用$currentRow.find()获取当前行内的按钮，避免出现所有按钮绑定到同一个定时器的错误
• 互斥逻辑实现：启动当前定时器前，遍历全局数组停止所有运行中的实例，确保同一时间只有一个定时器工作
• 按钮状态同步：停止其他定时器后，同步恢复对应行的按钮状态，保证UI交互的一致性

这样修改后，就能实现点击任意定时器的启动按钮时，自动停止其他正在运行的定时器，完全满足你的需求。

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