定时 ——setTimeout | setInterval
使用场景,setTimeout 只调用一次,setInterval 会重复调用,直到清除或重载。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div id="countDown"></div> <script> var num = 10; function countDown() { console.log(num) num--; // 清除 num == 0 ? clearInterval(clearId) : ""; } console.log("直接调用,只执行一次 num = 10") countDown(); // tip:为啥打印放里面咧,因为 setTimeout 是异步执行啊 setTimeout(function() { console.log("setTimeout 调用,只执行一次 num = 9") countDown(); }, 1000); var clearId = setInterval(function() { num == 8 ? console.log("setInterval 调用,一直执行,直到页面重载或 clearInterval 控制") : ""; countDown(); }, 1000); </script>
setTimeout 调用多次的使用:A > B > C > B > C > b …
三种方式,其中第一种不常见。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div id="countDown"></div> <script> var num = 5; function countDownFun() { console.log(num); num--; // 清除位置 1 —— 适用于调用方式 1、2、3 // num == 0 ? clearInterval(clearId) : ""; } // setInterval() 调用方式 1,第一个参数如果是调用了方法,则加上引号: '' 或 "" // var clearId = setInterval("countDownFun()", 1000); // setInterval() 调用方式 2,第一个参数为方法名(引用) // var clearId = setInterval(countDownFun, 1000); // setInterval() 调用方式 3,第一个参数为声明函数(匿不匿名都行啦) var clearId = setInterval(function fun() { // 清除位置 2 —— 针对调用方式 3 num == 0 ? clearInterval(clearId) : ""; countDownFun(); }, 1000); </script>