javascript
十一、深入JavaScript的定时器（七）
@Author：Runsen
@Date：2019/03/24
@updated Date：2019/05/29
作者介紹：Runsen目前大三下學期，專業化學工程與工藝，大學沉迷日語，Python， Java和一系列數據分析軟件。導致翹課嚴重，專業排名中下。.在大學60%的時間，都在CSDN。決定今天比昨天要更加努力。
文章目錄
- 定時器的常見方法
- 循環定時器
- 定義定時器的方式
- 實現循環定時器
- 定時炸彈
- 區別定時器
- 清除定時器
定時器的常見方法
-
setInterval()：循環定時器。周而復始的執行（循環執行）
-
setTimeout()：定時炸彈。用完以后立刻報廢（只執行一次）
循環定時器
循環定時器，就是我們常說的setInterval，他同樣也接收兩個參數，同樣也返回定時器，也類似的可以通過clearInterval來關閉定時器。
定義定時器的方式
**方式一：**匿名函數
每間隔一秒打印一次：
setInterval(function () {console.log(1); },1000);方式二：
每間隔一秒打印一次：
setInterval(fn,1000);function fn(){console.log(1); }實現循環定時器
下面，我們實現循環定時器的效果，如下圖所示。
對應的代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title> </head> <body> <button id="btn1">開啟定時器</button> <button id="btn2">結束定時器</button><script>window.onload = function () {// 1.獲取需要的標簽var btn1 = document.getElementById("btn1");var btn2 = document.getElementById("btn2");var height = 150, timer = null;// 2. 開啟定時器btn1.onclick = function () {// 2.1 設置定時器timer = setInterval(function () {height += 1;console.log("身高是" + height + "cm");}, 1000);};// 3. 結束定時器btn2.onclick = function () {console.log(timer);clearInterval(timer);}} </script> </body> </html>定時炸彈
定時炸彈也就是延遲執行定時器，其實就是我們常說的setTimeout，顧名思義，就是在時間結束后執行。setTimeout接收兩個參數，第一個是匿名函數，主要是寫定時后要執行的方法，第二個是時間間隔，以毫秒為單位，同時，setTimeout是有返回值的，他返回一個定時器，主要是方便后邊我們調用clearTimeout來關閉定時器，clearTimeout就是接收定時器作為參數的。
區別定時器
下面來一個案例區別延遲執行定時器和循環定時器，代碼如下。
<script>//延遲定時器 2000毫秒后執行一次且只執行一次setTimeout(function () {console.log(1);},2000);//毫秒 1000=1s//循環定時器 隔2000毫秒一直不停地 在執行setInterval(function () {console.log(2);},2000);//定時器（函數，時間） </script>清除定時器
清除定時器就是clearTimeout 和 clearInterval，clearTimeout就是清除延遲執行定時器，clearInterval就是 清除循環定時器。
<body><div id="box">還有<span id="timer">5s</span>我就去百度</div><script>var oTime = document.getElementById("timer");var oBox = document.getElementById("box");var num = 5;var time;time = setInterval(function () {num --;oTime.innerHTML = num + "s";if(num === 1){clearInterval(time);//清除定時器// clearTimeout();window.location.href = "http://www.baidu.com";}console.log(num);},1000);</script> </body>總結
以上是生活随笔為你收集整理的十一、深入JavaScript的定时器（七）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： keras从入门到放弃(七）多层感知器训
- 下一篇： sklearn模型的训练(下）