如何在多页面中延续执行jQuery函数直至触发终止按钮？

实现思路 #

利用localStorage实现同源页面间的状态共享，配合定时器和存储事件监听，确保所有相关页面能同步执行或停止目标函数，解决跨页面协同运行的问题。

具体代码实现 #

1. 通用逻辑（所有相关页面都需引入） #

先定义通用的启停控制和状态同步逻辑，每个页面可以按需修改自己的目标执行函数：

// 存储定时器ID，用于后续清除
let executionInterval = null;

// 自定义当前页面要执行的操作，每个页面可单独实现此函数
function executePageActions() {
    // 示例：当前页面的jQuery操作
    $('.div1').show();
    // 其他页面可替换为各自的操作，比如 $('.target-element').fadeIn();
}

// 启动执行的统一逻辑
function startRunning() {
    // 标记运行状态到localStorage，跨页面共享
    localStorage.setItem('executionStatus', 'active');
    // 立即执行一次操作
    executePageActions();
    // 按间隔重复执行（这里设为1秒，可根据需求调整）
    executionInterval = setInterval(executePageActions, 1000);
}

// 停止执行的统一逻辑
function stopRunning() {
    // 清除运行状态标记
    localStorage.removeItem('executionStatus');
    // 清除定时器，终止重复执行
    if (executionInterval) {
        clearInterval(executionInterval);
        executionInterval = null;
    }
}

// 监听localStorage变化，实现跨页面同步启停
window.addEventListener('storage', (e) => {
    if (e.key === 'executionStatus') {
        if (e.newValue === 'active') {
            // 其他页面启动时，当前页面同步启动（避免重复启动）
            if (!executionInterval) {
                startRunning();
            }
        } else {
            // 其他页面停止时，当前页面同步停止
            stopRunning();
        }
    }
});

// 页面加载时恢复状态，刷新后不丢失运行/停止状态
$(document).ready(() => {
    if (localStorage.getItem('executionStatus') === 'active') {
        startRunning();
    }
});

2. 页面按钮绑定 #

在每个相关页面中，给启停按钮绑定点击事件：

<button id="startBtn">启动执行</button>
<button id="stopBtn">停止执行</button>

<script>
$(document).ready(() => {
    $('#startBtn').click(startRunning);
    $('#stopBtn').click(stopRunning);
});
</script>

关键注意点 #

• 同源限制：所有相关页面必须在同一域名下，localStorage才能实现状态共享。
• 自定义操作：每个页面的executePageActions函数可以独立编写，实现各自需要的jQuery操作，启动后所有页面会同步执行自己的函数。
• 单次执行需求：如果不需要重复执行，只需删除setInterval相关代码，保留executePageActions()单次调用即可。

内容的提问来源于stack exchange，提问作者try-to-learn