先看一个需求:打印: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() 各自适用的场景不同,根据需求选择更为合适的方法,才能达到游刃有余的效果。