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

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

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

延遲執行(1次)

• setTimeout
  • 定義
    • setTimeout() 方法用于在指定的毫秒數後調用函數或計算表達式。
  • 用法(不帶參數函數)
    • 第一種

      • setTimeout(function () {

        }, timeout);

      • demo

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

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

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

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

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

  • 用法(帶參數函數)
    • • setTimeout(function () {codes...

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

    • • setTimeout(function,timeout,param1,param2,...);

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

    • • setTimeout('function(param1,param2,...)',timeout);

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

  • 停止定時器
    • clearTimeout(timerHandle);

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

延遲執行(多次)

• • • setInterval() 方法用于在間隔指定的毫秒數後調用函數或計算表達式,重複執行。
  • 跟setTimeout()用法基本一緻
  • • • setInterval(function () {

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

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

    • • setInterval('function()',timeout);

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

  • • • setInterval(function () {codes...

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

    • • setInterval(function,timeout,param1,param2,...);

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

    • • setInterval('function(param1,param2,...)',timeout);

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

  • • clearInterval(timerHandle);

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

"你的指尖,擁有改變世界的力量! "

歡迎關注我的個人部落格:https://sugarat.top