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

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

延迟执行(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)
"你的指尖,拥有改变世界的力量! "