如何控制JS刷新函数：点击指定<td>停止，点击外部恢复运行？

完全可以实现这个需求，核心是通过控制定时器的创建与清除来实现刷新的启停，结合事件监听判断点击区域。以下是具体实现代码：

完整代码示例 #

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    // 存储定时器ID，用于后续启停控制
    let refreshInterval;
    // 标记当前是否处于暂停状态
    let isPaused = false;

    // 定义刷新函数，方便复用
    function startRefresh(){
        refreshInterval = setInterval(function(){
            $("#here").load(window.location.href + " #here" );
        }, 3000);
        isPaused = false;
    }

    // 初始化启动刷新
    startRefresh();

    // 点击表格单元格时停止刷新
    $(document).on('click', '#here td', function(e){
        // 阻止事件冒泡，避免触发文档的点击事件
        e.stopPropagation();
        if(!isPaused){
            clearInterval(refreshInterval);
            isPaused = true;
        }
    });

    // 点击单元格外部时恢复刷新
    $(document).on('click', function(){
        if(isPaused){
            startRefresh();
        }
    });
});
</script>

<div id="here">
    <!-- 示例表格 -->
    <table border="1">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>单元格3</td>
            <td>单元格4</td>
        </tr>
    </table>
</div>

关键逻辑说明 #

• 定时器管理：用refreshInterval变量保存定时器ID，通过clearInterval()停止刷新，调用startRefresh()重新启动。
• 事件冒泡处理：在单元格的点击事件中加入e.stopPropagation()，防止点击单元格时触发文档的点击事件，导致刷新刚停止就恢复。
• 状态标记：用isPaused变量记录当前状态，避免重复清除或启动定时器，减少不必要的性能消耗。
• 事件委托：使用$(document).on('click', '#here td', ...)绑定事件，因为div是自动刷新的，新加载的表格单元格也能触发点击事件，不会因为DOM重新渲染而失效。

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