点此查看所有教程、项目、源码导航文章目录1. 背景2. 延时定时器 setTimeout2.1 基础语法2.2 取消延时定时器 clearTimeout3. 循环定时器 setInterval3.1 基础语法3.2 取消循环定时器 clearInterval4. 两个定时器的对比5. 入门阶段重要注意点5.1 时间只是**预期时间**不是绝对精准5.2 定时器里面的函数不会立刻执行5.3 不要忘记保存定时器 id否则无法取消5.4 不要随便开启大量循环定时器6. 实战案例页面倒计时7. 小结1. 背景前面我们学习了 location、history、navigator这些都是用来读取、控制浏览器信息的对象。这一节我们学习 BOM 里非常常用的定时器定时器也是 window 自带的方法属于 BOM 的能力。定时器的作用让代码不要立刻执行等待一段时间之后再执行或者每隔一段时间自动重复执行。我们平时网页里的倒计时、轮播图自动切换、定时刷新底层都是定时器。补充定时器不是 JS 语言本身ES的语法是浏览器提供的 APINode.js 里面也有类似定时器但是属于平台提供的能力。2. 延时定时器 setTimeoutsetTimeout 是延时定时器等待指定时间代码只执行一次。单位毫秒1 秒 1000 毫秒2.1 基础语法setTimeout 的第一个参数要求传入一个函数这个函数里面放我们想要延时执行的代码。我们可以先单独定义一个函数再把函数名传给 setTimeout这种写法更好理解// 1. 先单独定义好函数functionsayHello(){console.log(3秒之后打印这句话);}// 2. 把函数名传给setTimeout第二个参数是等待的毫秒数vartimerIdsetTimeout(sayHello,3000);注意这里写sayHello不要写成sayHello()。加括号代表立刻调用函数只写函数名是把函数交给定时器等时间到浏览器再去执行。上面这种写法是先把函数单独抽出来逻辑清晰。如果这个函数只需要在这里使用一次我们也可以不单独起名直接在参数位置写匿名函数效果完全一样vartimerIdsetTimeout(function(){console.log(3秒之后打印这句话);},3000);执行流程代码走到这里不会卡住等待继续往下执行其他代码等到时间到了才会执行里面的函数。重点定时器不会阻塞后面代码运行这和 alert、confirm 弹窗不一样。弹窗是阻塞代码定时器是异步安排任务。2.2 取消延时定时器 clearTimeoutsetTimeout 会返回一个数字编号我们一般叫定时器 id把 id 保存到变量里就可以用 clearTimeout 取消它。如果在时间到之前取消里面的函数就不会执行了。functionsayHello(){console.log(这句话不会打印);}vartimerIdsetTimeout(sayHello,3000);// 取消定时器clearTimeout(timerId);3. 循环定时器 setIntervalsetInterval 是循环定时器每隔固定时间重复执行函数不会自动停止。3.1 基础语法同样我们优先看有名函数的写法方便理解functionprintLog(){console.log(每隔1秒打印一次);}vartimerIdsetInterval(printLog,1000);熟悉之后也可以直接写匿名函数vartimerIdsetInterval(function(){console.log(每隔1秒打印一次);},1000);只要页面不关闭、不手动取消它会一直循环执行。3.2 取消循环定时器 clearInterval循环定时器如果不关闭会一直跑非常容易造成性能问题所以需要的时候一定要手动停止。varcount0;functionaddCount(){countcount1;console.log(count);if(count5){// 满足条件停止循环clearInterval(timerId);}}vartimerIdsetInterval(addCount,1000);4. 两个定时器的对比setTimeout等一段时间执行一次用 clearTimeout 取消setInterval每隔一段时间重复执行用 clearInterval 取消它们都是 window 的方法完整写法 window.setTimeout、window.setIntervalwindow 可以省略第二个参数都是毫秒1000 1 秒5. 入门阶段重要注意点5.1 时间只是预期时间不是绝对精准浏览器很忙的时候定时器里面的代码可能会稍微晚一点执行入门阶段我们先不用深究知道它不会绝对精准即可。5.2 定时器里面的函数不会立刻执行JS 代码是从上往下跑定时器只是 “登记一个任务”登记完直接继续向后执行不会原地等待。举个例子console.log(第一行);functiontest(){console.log(延时2秒);}setTimeout(test,2000);console.log(最后一行);打印顺序第一行 → 最后一行 → 延时 2 秒。5.3 不要忘记保存定时器 id否则无法取消想要停止定时器必须拿到它返回的 id如果不保存 id后面就没办法停止这个定时器。5.4 不要随便开启大量循环定时器定时器开多了会不停重复执行代码占用浏览器资源页面会变卡。用完及时关闭是好习惯。6. 实战案例页面倒计时需求页面上展示倒计时从 10 开始倒数每秒数字减 1到 0 的时候停止倒计时并提示时间到。思路使用 setInterval 循环定时器每隔 1 秒修改页面数字数字到 0 时清除定时器。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title倒计时案例/title/headbodyh1倒计时spanidnum10/span/h1script// 获取页面元素varspandocument.getElementById(num);vartime10;functioncountDown(){timetime-1;span.innerTexttime;// 判断倒计时到0if(time0){clearInterval(timerId);alert(时间到);}}// 开启循环定时器vartimerIdsetInterval(countDown,1000);/script/body/html效果案例讲解先拿到页面上用来显示数字的 span 元素定义初始倒计时时间 time 10单独定义倒计时函数 countDown交给循环定时器每 1 秒执行一次 countDown每次执行时间减 1把新的数字更新到页面当 time 小于等于 0调用 clearInterval 关闭定时器同时弹出提示。7. 小结setTimeout延时定时器等待一段时间执行一次clearTimeout 取消。setInterval循环定时器每隔一段时间重复执行clearInterval 取消。定时器第一个参数是函数可以先单独定义有名函数再传入也可以直接写匿名函数。时间单位是毫秒1s 1000ms。定时器不会阻塞后面代码属于浏览器安排的异步任务。定时器 id 是编号保存 id才可以取消定时器。循环定时器一定要记得在合适时机清除避免一直运行消耗性能。