js實現(xiàn)內(nèi)置計時器

更新時間：2019年12月16日 09:28:54 作者：ICY___

這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)內(nèi)置計時器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

計時器對于圖片輪播和倒計時之類的與時間相關(guān)的項目有著很大的聯(lián)系，它是實現(xiàn)這些的核心語法，如何一次深刻理解js計時器？往下看你就知道，有驚喜哦！

js計時器有兩種，一種為延時后單次的執(zhí)行，另一種為延時多次執(zhí)行。通過函數(shù)的遞歸，前者也可以打破壁壘，擁有循環(huán)執(zhí)行的功能。

setTimeout( javascript語句 , 毫秒);
（其中第一個值可以是一個函數(shù) 需要加" "，也可以是代碼）

//延遲一段時間執(zhí)行執(zhí)行一次

setInterval("javascript語句" , 毫秒);
（其中第一個值可以是一個函數(shù) 需要加" "，也可以是代碼）

//循環(huán)執(zhí)行

具體實例（一些細(xì)節(jié)和具體的用法還是在案例代碼中便于理解）

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>計時器</title>
  </head>
 
<body>
  <button id="none">停止計時器</button>
  <button id="start">開始計時器</button>
  <script>
    // 有兩個計時器
    // setTimeout();
    // 延遲一段時間 執(zhí)行 執(zhí)行一次
    // setInterval();
    // 循環(huán)執(zhí)行
    var stoptime=document.getElementById('none');//默認(rèn)從零開始自加 獲取開始按鈕
    var starttime=document.getElementById('start');//獲取停止按鈕
    var count=0;
    var timecount;
    // 第一種
    /*showtime();
    function showtime(){
      count++;
      console.log(count);
      timecount=setTimeout('showtime()',1000);//延時一秒
    }//利用遞歸來實現(xiàn)循環(huán)時間
    stoptime.onclick=function(){//停止計時器
      clearTimeout(timecount);//將計時器清除，即停止自加
    }
    starttime.onclick=function(){//開始計時器
      timecount=setTimeout('showtime()',1000);//繼續(xù)開始自加
    }*/
//優(yōu)點：重啟計時器簡單，由于是原本是單次執(zhí)行，只需將之前的遞歸函數(shù)重新復(fù)制即可 缺點：需要遞歸調(diào)用
    // 第二種
    showtime();
    function showtime(){//封裝函數(shù)
      timecount=setInterval(function(){
        count++;
        console.log(count);
      },1000)
    }
    stoptime.onclick=function(){
      clearInterval(timecount);
    }
    starttime.onclick=function(){
      showtime();
    }
//優(yōu)點：不需要遞歸調(diào)用，直接實現(xiàn)循環(huán)。缺點：重啟較復(fù)雜，需要調(diào)用所有函數(shù)，建議封裝函數(shù)。
  </script>
</body>
 
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: