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

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



目录
相关文章
|
1月前
|
JavaScript 前端开发 安全
JavaScript基础-定时器:setTimeout, setInterval
【6月更文挑战第13天】JavaScript中的`setTimeout`和`setInterval`是异步编程的关键工具,用于按计划执行代码。`setTimeout`在延迟后执行一次,而`setInterval`则周期性执行。常见问题包括忘记清除定时器导致内存泄漏,递归使用`setTimeout`可能引发无限递归,以及字符串代码执行的安全隐患。解决方法包括使用`clearTimeout`和`clearInterval`,设置递归终止条件,以及优先使用函数表达式。理解定时器的非精确性并采用错误处理策略也是实践中的重要技巧。通过示例展示了如何延迟显示消息和周期性打印计数。
|
9天前
|
JavaScript
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
30 0
|
2月前
|
JavaScript 前端开发 UED
JavaScript 持续变化:setTimeout 与 setInterval 的巧妙应用
JavaScript 持续变化:setTimeout 与 setInterval 的巧妙应用
27 1
|
2月前
|
JavaScript 前端开发
定时器 setInterval 有一个有名函数 fn1,setInterval(fn1, 500)与 setInterval(fn1(), 500)有什么区别?
定时器 setInterval 有一个有名函数 fn1,setInterval(fn1, 500)与 setInterval(fn1(), 500)有什么区别?
18 1
|
11月前
|
JavaScript
js中两种定时器,setTimeout和setInterval的区别
js中两种定时器,setTimeout和setInterval的区别
68 0
|
JavaScript 前端开发
js 定时器用法详解——setTimeout()、setInterval()、clearTimeout()、clearInterval()
写在前面: 在js应用中,定时器的作用就是可以设定当到达一个时间来执行一个函数,或者每隔几秒重复执行某段函数。这里面涉及到了三个函数方法:setInterval()、setTimeout()、clearInterval(),本文将围绕这三种函数的用法,来实现定时器的功能,需要的朋友可以过来参考下,喜欢的可以点波赞,或者关注一下本人,希望对大家有所帮助。 定时器的应用需求: 1.设定一个时间,当时间到达的时候执行函数————比如:倒计时跳转页面等等。 2.每隔一段时间重复执行某段函数————比如抢票软件,比如设定500毫秒就重复刷新一次页面等等。 倒计时跳转实现demo:
565 0
js 定时器用法详解——setTimeout()、setInterval()、clearTimeout()、clearInterval()
|
Web App开发 JavaScript 前端开发
Javascript定时器(二)——setTimeout与setInterval
setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码。
Javascript定时器(二)——setTimeout与setInterval
|
Web App开发 移动开发 前端开发
深入学习setTimeOut
深入学习setTimeOut
207 0