js中定時器setTimeout與setInterval使用方法經驗總結

前言,最近在做一個音頻播放項目的時候,碰到播放時間精度的問題,搗鼓了幾天,最終巧妙的運用定時器去降低了錯誤發生頻率

正題,下面是對定時器的使用總結,如有錯誤之處,請讀者加以糾正.

延遲執行(1次)

• setTimeout

  • 定義

    • setTimeout() 方法用於在指定的毫秒數后調用函數或計算表達式。

  • 用法(不帶參數函數)

    • 第一種
      • setTimeout(function () {
        }, timeout);
      • demo

        // 測試延遲執行的函數
            function Fun1() {
                alert("不帶參數函數");
            }
        
            setTimeout(function(){
                Fun1();
            }, 2000);
            //或者下面這種寫法
            setTimeout(() => {
                Fun1();
            }, 2000);
        

    • 第二種
      • setTimeout(function,timeout);
      • demo

         // 測試延遲執行的函數
             function Fun1() {
                 alert("不帶參數函數");
             }
             //注意這里調用的函數不加括號
             setTimeout(Fun1, 2000);
        

    • 第三種
      • setTimeout('function()',timeout);
      • demo

         // 測試延遲執行的函數
             function Fun1() {
                 alert("不帶參數函數");
             } 
            //注意這里調用的函數需要加括號
             setTimeout('Fun1()',2000);
        

  • 用法(帶參數函數)

    • 第一種
      • setTimeout(function () {codes...
        }, timeout);
      • demo

        // 測試延遲執行的函數
            function Fun2(str1,str2) {
                alert("帶參數函數"+str1+str2);
            }
        
            setTimeout(function(){
                Fun2('123','456');
            }, 2000);
            //或者下面這種寫法
            setTimeout(() => {
                 Fun2('123','456');
            }, 2000);
        

    • 第二種
      • setTimeout(function,timeout,param1,param2,...);
      • demo

         // 測試延遲執行的函數
            function Fun2(str1,str2) {
                alert("帶參數函數"+str1+str2);
            }
             //注意這里調用的函數不加括號
             setTimeout(Fun2, 2000,'參數1內容','參數2內容');
        

    • 第三種
      • setTimeout('function(param1,param2,...)',timeout);
      • demo

         // 測試延遲執行的函數
             function Fun2(str1,str2) {
                alert("帶參數函數"+str1+str2);
            }
            //注意這里調用的函數需要加括號
             setTimeout('Fun2("參數1內容","參數2內容")',2000);
        

  • 停止定時器

    • clearTimeout(timerHandle);
    • demo

      function Fun3(str1) {
        alert(str1);
      }
        //設置定時器
      var timer=setTimeout(Fun3,2000,"參數1");
        //清除指定定時器
        clearTimeout(timer)
      

延遲執行(多次)

• setTimeout

  • 定義

    • setInterval() 方法用於在間隔指定的毫秒數后調用函數或計算表達式,重復執行。

  • 跟setTimeout()用法基本一致

  • 用法(不帶參數函數)

    • 第一種
      • setInterval(function () {
        }, timeout);
      • demo

        // 測試延遲執行的函數
            function Fun1() {
                alert("不帶參數函數");
            }
        
            setInterval(function(){
                Fun1();
            }, 2000);
            //或者下面這種寫法
            setInterval(() => {
                Fun1();
            }, 2000);
        

    • 第二種
      • setTimeout(function,timeout);
      • demo

         // 測試延遲執行的函數
             function Fun1() {
                 alert("不帶參數函數");
             }
             //注意這里調用的函數不加括號
             setInterval(Fun1, 2000);
        

    • 第三種
      • setInterval('function()',timeout);
      • demo

         // 測試延遲執行的函數
             function Fun1() {
                 alert("不帶參數函數");
             } 
            //注意這里調用的函數需要加括號
             setInterval('Fun1()',2000);
        

  • 用法(帶參數函數)

    • 第一種
      • setInterval(function () {codes...
        }, timeout);
      • demo

        // 測試延遲執行的函數
            function Fun2(str1,str2) {
                alert("帶參數函數"+str1+str2);
            }
        
            setInterval(function(){
                Fun2('123','456');
            }, 2000);
            //或者下面這種寫法
            setInterval(() => {
                 Fun2('123','456');
            }, 2000);
        

    • 第二種
      • setInterval(function,timeout,param1,param2,...);
      • demo

         // 測試延遲執行的函數
            function Fun2(str1,str2) {
                alert("帶參數函數"+str1+str2);
            }
             //注意這里調用的函數不加括號
             setInterval(Fun2, 2000,'參數1內容','參數2內容');
        

    • 第三種
      • setInterval('function(param1,param2,...)',timeout);
      • demo

         // 測試延遲執行的函數
             function Fun2(str1,str2) {
                alert("帶參數函數"+str1+str2);
            }
            //注意這里調用的函數需要加括號
             setInterval('Fun2("參數1內容","參數2內容")',2000);
        

  • 停止定時器

    • clearInterval(timerHandle);
    • demo

      function Fun3(str1) {
        alert(str1);
      }
        //設置定時器
      var timer=setInterval(Fun3,2000,"參數1");
        //清除指定定時器
        clearInterval(timer)