嵌套setInterval导致demo2重复输出数据的解决方法咨询

问题场景：使用嵌套setInterval时，外层的services定时器需要持续运行，但内部的临时任务（如tempJob1）每次都会被重复创建，导致demo2出现重复数据，同时需要保留临时任务可通过clearInterval终止的特性。

原问题代码：

var services = setInterval(function () {
    document.getElementById("demo").innerHTML += "Hello";
    
    //can be tempJob1, tempJob2, tempJob3, etc...
    var tempJob1 = setInterval(function () {
        document.getElementById("demo2").innerHTML += "Hello";
    }, 1000);
    
    //clearInterval(tempJob1)
}, 1000);

<div id="demo"></div>
<div id="demo2"></div>

问题根源 #

原代码中tempJob1是外层定时器回调的局部变量，每次services执行都会创建一个全新的独立定时器，多个定时器同时往demo2追加内容，最终导致重复输出。

解决方案 #

将临时任务的定时器变量提升到外层作用域，通过判断变量状态避免重复创建：

方案1：仅创建一次临时任务（适合临时任务需持续运行，不随services重复创建）

// 把临时任务变量放到外层作用域，追踪定时器状态
var tempJob1 = null;
var services = setInterval(function () {
    document.getElementById("demo").innerHTML += "Hello";
    
    // 仅当临时任务未创建时才初始化
    if (!tempJob1) {
        tempJob1 = setInterval(function () {
            document.getElementById("demo2").innerHTML += "Hello";
        }, 1000);
    }
}, 1000);

// 后续可通过以下代码终止临时任务
// clearInterval(tempJob1);
// tempJob1 = null; // 重置状态，允许后续重新创建（可选）

方案2：每次services执行时重启临时任务（适合临时任务需随services刷新）

如果需要每次services执行时，先终止之前的临时任务再创建新的，可使用以下代码：

var tempJob1 = null;
var services = setInterval(function () {
    document.getElementById("demo").innerHTML += "Hello";
    
    // 先清除已存在的临时任务，再创建新的
    if (tempJob1) {
        clearInterval(tempJob1);
    }
    tempJob1 = setInterval(function () {
        document.getElementById("demo2").innerHTML += "Hello";
    }, 1000);
}, 1000);

// 终止临时任务
// clearInterval(tempJob1);

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