首页/新闻资讯/正文详情

js定时器与异步基础讲解

发布时间:2026/9/24 9:33:15 来源:云帆数科 栏目:资讯中心
js定时器与异步基础讲解
JS 默认是单线程代码一行一行排队执行同一时间只能干一件事。 如果一段代码执行很久后面代码就会卡住阻塞。异步 定时器解决的问题不让长时间 / 等待类的任务卡住后面代码先把等待任务放到一边继续往下跑主线代码等时间到了再回头执行这个任务。一句话不用原地死等程序可以继续做别的事时间到了再执行指定代码。⚠️ 定时器不是 “到点立刻执行”是到点把回调放进任务队列等主线空闲才执行。二、两个定时器setTimeout和setInterval1. setTimeout 延时定时器一次性作用延迟多少毫秒后执行一次代码只跑 1 次单位毫秒 ms1s 1000ms语法按你习惯用 let 箭头函数// 语法let 变量 setTimeout(回调函数, 等待毫秒数) let timer1 setTimeout((){ console.log(2秒之后打印这句话只执行一次); },2000) // 清除定时器取消任务 clearTimeout(timer1)应用场景 setTimeout弹窗延迟弹出进入页面 2 秒后弹出欢迎提示搜索框防抖用户停止输入一小会儿再发请求减少请求次数过渡动画延时、提示消息自动消失toast 提示 3 秒消失模拟接口请求写测试代码模拟等待服务器返回数据2. setInterval 间隔定时器循环重复执行作用每隔固定毫秒重复执行代码不停循环let timer2 setInterval((){ console.log(每隔1秒打印一次); },1000) // 停止循环定时器 clearInterval(timer2)应用场景 setInterval倒计时验证码倒计时、活动秒杀倒计时轮播图自动切换定时轮询接口每隔几秒去后台拿最新数据实时刷新页面数字跳动动画三、异步基础宏任务定时器属于宏任务JS 异步分宏任务、微任务setTimeout / setInterval属于宏任务执行顺序口诀主线同步代码 → 全部微任务 → 再取宏任务执行举个例子帮理解console.log(同步代码 最先执行); let t setTimeout((){ console.log(定时器最后才执行); },0) console.log(同步代码 第二行);输出顺序同步代码 最先执行 同步代码 第二行 定时器最后才执行哪怕延时写 0也不是立刻执行只是尽快放进宏任务队列等主线全部做完才执行。四、常见坑作业必考单位是毫秒不是秒别直接写setTimeout(fn,2)当成 2 秒这是 2 毫秒定时器返回值是编号数字保存这个编号才能用 clear 清除不清除会一直占用资源setInterval 容易累积误差如果里面代码执行时间长两次执行间隔会不准精准倒计时推荐用setTimeout递归代替 setInterval// 递归版setTimeout更精准的倒计时 let count 10 let countDown (){ count-- console.log(count) if(count0){ let timer setTimeout(countDown,1000) } } countDown()定时器 this 指向问题箭头函数不会改变 this普通 function 会指向 window

相关推荐

Springboot backlog MDC + ClassicConverter
Springboot backlog MDC + ClassicConverter

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录前言一、Trace filter 实现1、请求入口 MDC 注入2、异步场景 MDC 传递二、Filter 注册三、Sensitive utilsExample ID Card maskerSensitiveUtils四、ClassicConvert… · 2026/9/24 9:33:15

Skia ARM Chromebook GLES 交叉编译资产(chromebook_arm_gles)完整指南
Skia ARM Chromebook GLES 交叉编译资产(chromebook_arm_gles)完整指南

图形学 【免费下载链接】skia Skia is a complete 2D graphic library for drawing Text, Geometries, and Images. See documentation for contribution instructions. 项目地址: https://gitcode.com/gh_mirrors/ski/skia 点击查看 免费下载 本篇技术指南聚焦于 … · 2026/9/24 9:33:09

自部署开源知识库Outline:成本、部署与团队协作实践
自部署开源知识库Outline:成本、部署与团队协作实践

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 9:33:09

2026实测:智能体办公平台企业协同能力真实体验
2026实测:智能体办公平台企业协同能力真实体验

最近我一直在找能适配团队协作全流程的AI办公工具,之前试过不少只能支持单人生成内容的产品,每次AI产出结果之后,我都要手动把文件导出、重命名、再上传到团队共享的协作空间里,来回跳转不同App传输文件的过程特别消耗精力&#x… · 2026/9/24 10:06:41

魔百盒M401A刷Armbian部署Home Assistant智能家居中枢
魔百盒M401A刷Armbian部署Home Assistant智能家居中枢

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 10:06:41

CentOS+宝塔面板部署Django:从环境配置到Nginx反向代理
CentOS+宝塔面板部署Django:从环境配置到Nginx反向代理

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 10:06:41

2026 年度南京 AI 销售系统|5 家本地企业销售 AI 服务商测评榜单
2026 年度南京 AI 销售系统|5 家本地企业销售 AI 服务商测评榜单

本文面向南京制造、B2B 工贸、商贸、电商、中小服务企业的 AI 销售系统采购,整理 5 家具备本地研发实施能力服务商:江苏企裕集团、旗下南京区域运营主体南京企裕,以及云蝠智能(南京星蝠科技)、南京智子互联、尊创数字科… · 2026/9/24 10:06:34

2026年国内企业AI办公工具选型完全指南
2026年国内企业AI办公工具选型完全指南

企业在调研AI办公工具的过程中,很容易陷入几个典型的认知误区:不少团队会直接拉取不同产品的功能清单做横向比对,把功能条目数量最多的选项作为优先考虑对象;也有部分团队会把采购预算作为核心决策标尺,优先选择报价最… · 2026/9/24 10:06:28

javase 2.变量与数据类型
javase 2.变量与数据类型

课前回顾 什么是程序? 程序就是为了解决某个问题或者实现某个目标而编写的一系列有序指令的集合Java程序是如何执行的? Java是一门高级语言,计算机不能够直接识别我们编写的Java程序。因此,Java 提供了 JVM (Java Virt… · 2026/9/24 10:06:28

基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程
基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程

简介:这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源,围绕YOLOv8实现渔船作业监控系统,可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件,约24.21MB,以70个Python源码文件为… · 2026/9/24 0:00:13

1D-CNN时间序列建模实战:从Conv1d原理到工业落地
1D-CNN时间序列建模实战:从Conv1d原理到工业落地

简介:面向时间序列数据建模的一维卷积神经网络完整实现,适合深度学习入门者及需要快速验证时序模型的研究者,能够从音频、文本、传感器或股价等序列中挖掘局部特征与时间依赖。压缩包体积很小,只有3KB,内含3个Python脚… · 2026/9/24 0:00:26

柔软的L:汉语语流中被忽视的舌肌张力控制
柔软的L:汉语语流中被忽视的舌肌张力控制

1. 这个“L”不是字母表里的L,而是舌尖上的L最近在几个方言群和语音教学社群里,反复看到有人发一句:“也说字母L:柔软的长舌”。初看以为是英语发音课笔记,点开才发现全是方言爱好者、播音系学生、语言康复师甚至戏曲演… · 2026/9/24 0:00:44

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码