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)