相比 setInterval()，更推荐 setTimeout()

目录

1、通过 setInterval() 的方式实现

2、通过 setTimeout() 的方式实现

3、用 setInterval() 实现变更后的需求

4、用 setTimeout() 实现变更后的需求

5、setInterval() 和 setTimeout() 比较总结

先看一个需求：打印：1，2，3，4，5，6，7，8，9。（要求每间隔一秒钟打印出一个数字）

1、通过 setInterval() 的方式实现

let n = 1;
let step = setInterval(()=>{
    if(n===10)
        clearInterval(step);
    console.log(n);
    n++;
},1000)

采取 setInterval() 方法可以毫不费力的实现题目要求：当数组 n 等于 10 的时候，终止 setInterval() 即可。

2、通过 setTimeout() 的方式实现

let n = 1;
let step = () => {
    setTimeout(()=>{
        console.log(n);
        n++;
        if(n<10)
            step();
    },1000)
}
step();    //灵活性大，可以在任意位置调用该函数

通过 setTimeout() 的方式也多不了几行代码，利用递归的方式，同样可以实现上述题目，但是在函数调用时机上比较灵活，不需要添加新的约束条件，就可以在任意位置调用该 setp() 函数。

这个时候产品经理跑过来告诉你，需求变了老弟，要求跳过打印 5，直接打印后面的 6~9。

3、用 setInterval() 实现变更后的需求

let n = 1;
let step = setInterval(()=>{
    if(n===5){
        clearInterval(step);
        n = n + 1;    //此时的 n = 6
        let addStep = setInterval(()=>{
            console.log(n);    //每间隔一秒钟打印：6,7,8,9
            n = n + 1;
            if(n===10){
                clearInterval(addStep);
            }
        },1000)
    }
    console.log(n);
    n++;
},1000)    //每间隔一秒钟打印：1,2,3,4

通过写两个 setInterval() 的方法可以实现变更的需求，这不免有些麻烦。来看看下面的setTimeout() 的方式。

4、用 setTimeout() 实现变更后的需求

let n = 1;
let step = () => {
    setTimeout(()=>{
        console.log(n);
        n = n + 1;
        if(n===5)
            n = n + 1;
        if(n<10)
            step();
    },1000)
}
step();

完美，easy。只需要增加一个判断条件即可实现变更后的需求。所以推荐使用 setTimeout() 方法。

5、setInterval() 和 setTimeout() 比较总结

setInterval() 方法是每间隔一段时间执行一个回调函数或一段代码，它可以通过 clearInterval() 方法关闭，但是没有办法在中间暂停。它就像是一个开机不能暂停运行的机器，如果想暂停工作，只能通过关机的方式。setTimeout() 方法是经过一段时间执行一个回调函数或一段代码，它可以通过递归调用自己来实现和 setInterval() 方法同样的效果，而且还可以在递归调用自身上添加判断条件，实现暂停的效果，这就是为什么推荐使用 setTimeout() 方法的原因了。

当然，也不是所有场景都推荐使用 setTimeout() 方法，setInterval() 和 setTimeout() 各自适用的场景不同，根据需求选择更为合适的方法，才能达到游刃有余的效果。