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



目录
相关文章
|
存储 算法 编译器
【C++ 字符数组的模板特化】面向字符串的C++模板特化:理解与实践
【C++ 字符数组的模板特化】面向字符串的C++模板特化:理解与实践
312 1
|
云安全 弹性计算 Linux
2024年《Palworld/幻兽帕鲁》新手一键部署联机服务器教程
《幻兽帕鲁》作为2024年的开年热门游戏,吸引了众多玩家的关注。在这个奇妙的游戏世界里,与小伙伴们一同畅游是许多玩家的梦想。为了帮助你实现这一愿望,下面将详细介绍搭建你自己的幻兽帕鲁服务器的步骤。阿里云提供快速、简化的服务器搭建方案,新手小白0基础1分钟搞定幻兽帕鲁游戏联机服务器搭建!
|
SQL 监控 测试技术
【操作系统】Linux性能优化诊断pidstat+mpstat详解
【操作系统】Linux性能优化诊断pidstat+mpstat详解
【操作系统】Linux性能优化诊断pidstat+mpstat详解
|
11天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!
|
9天前
|
存储 人工智能 搜索推荐
终身学习型智能体
当前人工智能前沿研究的一个重要方向:构建能够自主学习、调用工具、积累经验的小型智能体(Agent)。 我们可以称这种系统为“终身学习型智能体”或“自适应认知代理”。它的设计理念就是: 不靠庞大的内置知识取胜,而是依靠高效的推理能力 + 动态获取知识的能力 + 经验积累机制。
342 130
|
9天前
|
存储 人工智能 Java
AI 超级智能体全栈项目阶段二:Prompt 优化技巧与学术分析 AI 应用开发实现上下文联系多轮对话
本文讲解 Prompt 基本概念与 10 个优化技巧,结合学术分析 AI 应用的需求分析、设计方案,介绍 Spring AI 中 ChatClient 及 Advisors 的使用。
427 130
AI 超级智能体全栈项目阶段二:Prompt 优化技巧与学术分析 AI 应用开发实现上下文联系多轮对话
|
3天前
|
存储 安全 前端开发
如何将加密和解密函数应用到实际项目中?
如何将加密和解密函数应用到实际项目中?
201 138
|
9天前
|
人工智能 Java API
AI 超级智能体全栈项目阶段一:AI大模型概述、选型、项目初始化以及基于阿里云灵积模型 Qwen-Plus实现模型接入四种方式(SDK/HTTP/SpringAI/langchain4j)
本文介绍AI大模型的核心概念、分类及开发者学习路径,重点讲解如何选择与接入大模型。项目基于Spring Boot,使用阿里云灵积模型(Qwen-Plus),对比SDK、HTTP、Spring AI和LangChain4j四种接入方式,助力开发者高效构建AI应用。
384 122
AI 超级智能体全栈项目阶段一:AI大模型概述、选型、项目初始化以及基于阿里云灵积模型 Qwen-Plus实现模型接入四种方式(SDK/HTTP/SpringAI/langchain4j)