使用setInterval实现文本替换时点击按钮后新旧值交替显示的问题咨询

嘿，这个问题我之前也踩过坑！核心原因其实很直白：每次调用loadData函数时，你都新建了一个setInterval定时器，但从来没清除过旧的那个。

第一次页面加载调用loadData()时，会创建一个每秒把.setMe内容改成"Hello"的定时器；点击按钮调用loadData("Good")时，又会生成一个每秒改成"Good"的新定时器。这两个定时器会同时跑，轮流修改DOM内容，自然就出现了文本交替跳的情况。

要解决这个问题，我们只需要在创建新定时器前，先把旧的定时器清掉就行。具体做法是用一个变量存住定时器的ID，每次调用函数时先检查并清除旧定时器，再创建新的。

修改后的完整代码如下：

// 用变量存储定时器ID，放在全局或函数外部作用域
let textIntervalId;

function loadData(set){
    // 简化默认值判断，ES6空值合并运算符更简洁
    const displayText = set ?? "Hello";
    
    // 先清除之前的定时器（如果存在）
    if (textIntervalId) {
        clearInterval(textIntervalId);
    }
    
    function setMe(val){
        // 创建新定时器并保存ID
        textIntervalId = setInterval(function(){
            $(".setMe").html(val);
        }, 1000);
    }
    
    setMe(displayText);
}

loadData();
$('#clickMe').on('click', function(){
    loadData("Good");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="setMe"></div>
<button id="clickMe">Click Me</button>

关键修改点说明： #

• 新增textIntervalId变量，专门记录当前运行的定时器ID
• 每次调用loadData时，先通过clearInterval清除旧定时器，避免多个定时器同时工作
• 用set ?? "Hello"简化了原来的if-else判断（如果你的环境不支持ES2020语法，换回原来的if-else逻辑也完全没问题）

这样修改后，点击按钮时旧的定时器会被立即终止，只有新的定时器在运行，就只会稳定显示"Good"啦！

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