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



目录
相关文章
|
3天前
|
存储 JavaScript 前端开发
JavaScript基础
本节讲解JavaScript基础核心知识:涵盖值类型与引用类型区别、typeof检测类型及局限性、===与==差异及应用场景、内置函数与对象、原型链五规则、属性查找机制、instanceof原理,以及this指向和箭头函数中this的绑定时机。重点突出类型判断、原型继承与this机制,助力深入理解JS面向对象机制。(238字)
|
2天前
|
云安全 人工智能 安全
阿里云2026云上安全健康体检正式开启
新年启程,来为云上环境做一次“深度体检”
1476 6
|
4天前
|
安全 数据可视化 网络安全
安全无小事|阿里云先知众测,为企业筑牢防线
专为企业打造的漏洞信息收集平台
1316 2
|
4天前
|
缓存 算法 关系型数据库
深入浅出分布式 ID 生成方案:从原理到业界主流实现
本文深入探讨分布式ID的生成原理与主流解决方案,解析百度UidGenerator、滴滴TinyID及美团Leaf的核心设计,涵盖Snowflake算法、号段模式与双Buffer优化,助你掌握高并发下全局唯一ID的实现精髓。
326 160
|
4天前
|
人工智能 自然语言处理 API
n8n:流程自动化、智能化利器
流程自动化助你在重复的业务流程中节省时间,可通过自然语言直接创建工作流啦。
374 4
n8n:流程自动化、智能化利器
|
12天前
|
机器学习/深度学习 安全 API
MAI-UI 开源:通用 GUI 智能体基座登顶 SOTA!
MAI-UI是通义实验室推出的全尺寸GUI智能体基座模型,原生集成用户交互、MCP工具调用与端云协同能力。支持跨App操作、模糊语义理解与主动提问澄清,通过大规模在线强化学习实现复杂任务自动化,在出行、办公等高频场景中表现卓越,已登顶ScreenSpot-Pro、MobileWorld等多项SOTA评测。
1494 7
|
5天前
|
人工智能 API 开发工具
Skills比MCP更重要?更省钱的多!Python大佬这观点老金测了一周终于懂了
加我进AI学习群,公众号右下角“联系方式”。文末有老金开源知识库·全免费。本文详解Claude Skills为何比MCP更轻量高效:极简配置、按需加载、省90% token,适合多数场景。MCP仍适用于复杂集成,但日常任务首选Skills。推荐先用SKILL.md解决,再考虑协议。附实测对比与配置建议,助你提升效率,节省精力。关注老金,一起玩转AI工具。
|
2天前
|
Linux 数据库
Linux 环境 Polardb-X 数据库 单机版 rpm 包 安装教程
本文介绍在CentOS 7.9环境下安装PolarDB-X单机版数据库的完整流程,涵盖系统环境准备、本地Yum源配置、RPM包安装、用户与目录初始化、依赖库解决、数据库启动及客户端连接等步骤,助您快速部署运行PolarDB-X。
231 1
Linux 环境 Polardb-X 数据库 单机版 rpm 包 安装教程
|
13天前
|
人工智能 Rust 运维
这个神器让你白嫖ClaudeOpus 4.5,Gemini 3!还能接Claude Code等任意平台
加我进AI讨论学习群,公众号右下角“联系方式”文末有老金的 开源知识库地址·全免费
1369 17
|
4天前
|
自然语言处理 监控 测试技术
互联网大厂“黑话”完全破译指南
互联网大厂黑话太多听不懂?本文整理了一份“保姆级”职场黑话词典,涵盖PRD、A/B测试、WLB、埋点、灰度发布等高频术语,用大白话+生活化类比,帮你快速听懂同事在聊什么。非技术岗也能轻松理解,建议收藏防踩坑。
286 161