js定時器及定時器疊加問題


         回武漢隔離的第二天打卡,武漢加油,逆戰必勝!今天想和大家簡單聊一下js定時器的問題。

         1.setTimeout 延時器 在指定時間后執行一次,注意只會執行一次

    當然有的時候我們想用延時器做出定時器的效果,讓它一直執行也可以,就是反復調用函數自身即可,代碼如下: 

      fun();    

      function fun() {
        console.log(1)
        setTimeout("fun()",1000); //自身調用,重復執行
      }

  2.setInterval 定時器 在指定的時間間隔內重復的執行,如不清除,會一直執行下去

      setInterval(function () {

        console.log(1);

      },1000)

  3.值得注意的是在setTimeroutsetInterval的使用中,如果傳入參數,那只能傳入函數名:

      setInterval(fn,1000)

  4.下面問題來了,當我們在執行定時器的過程當中,會發現一件有趣的事情,那就是定時器會累加,看下面的例子: 

    當我們多次點擊瀏覽器窗口時會發現,打印的速度越來越快,這就是我們所說的定時器累加。    

      var timer;
      document.onclick = function() {
        timer = setInterval(function(){
          console.log(1)
        },1000)
      }

    那么為什么會出現這樣的情況呢?咱們舉個例子,這就好像一個人每隔一秒鍾使用一次打印機,點兩下的話就相當於兩個人去使用這個打印機,他們是同時進行的,因此每一秒打印會有多於原來兩倍的速度。那么如何解決這個問題呢?

    定時器累加問題的解決:先清除定時器,再使用定時器。代碼示例如下:

      var timer;
      document.onclick = function() {
        clearInterval(timer)
        timer = setInterval(function(){
          console.log(1)
        },1000)
      }

    

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM