js中定时器setTimeout与setInterval使用方法经验总结

时间:2021-03-31 19:15:57

前言,最近在做一个音频播放项目的时候,碰到播放时间精度的问题,捣鼓了几天,最终巧妙的运用定时器去降低了错误发生频率

正题,下面是对定时器的使用总结,如有错误之处,请读者加以纠正.

延迟执行(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)