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