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