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)