09 - 定时器

我们知道 的代码基本都是瞬间执行完的，如果想在一定的时间后再去做某些事情，或者说隔一段时间重复的去做某些事情，那就需要用到定时器

9.01 - setInterval(fn|string, ms[, arg1,arg2,...])

循环定时器，每隔一段时间重复的执行一个函数

• 使用方法

  • 参数：

    • fn | string：需要执行的函数，或者代码字符串
    • ms：重复一次的间隔时间（毫秒数）
    • arg：向方法内部传递的参数

  • 代码案例

    • 每隔1s打印一次\"hello world~\"

    setInterval(function(){console.log(\"hello world~\");},1000);

    • 参数的使用

    function fn(a,b,c){
        console.log(a+b+c);// 每秒输出一次 6 
    }
    setInterval(fn,1000,1,2,3);

• 相关的东西

  • 切换窗口卡顿
  • fn参数的作用域默认为全局作用域
  • 执行的函数中如果有回调函数或者阻塞的代码时，不会等待这类代码执行完毕而直接开始下一轮函数的执行

  var
  	ms = 500,
      endTime = new Date();
  setInterval(fn,ms);
  function fn(){
      // 输出本次与上一次fn执行的时间间隔
      console.log(new Date() - endTime);
      // 循环阻塞代码的（阻塞的时间大于定时器执行一轮的时间间隔）
      while(new Date()-endTime <= ms*2 ){};
      // 更新本次代码执行的时间
      endTime = new Date();
  };

  ​

9.02 - setTimeout(fn|string, ms[, arg1,arg2,...])

单次定时器，规定时间过后执行一次函数

• 使用方法

  • 参数：（略）

  • 代码案例：

    • 界面加载后 2s 弹出一次窗口

    setTimeout(function(text){
        alert(text);
    },2000,\"hello world!\");

• 循环调用

setTimeout 可以通过循环调用的方式实现和 setInterval 一样的间隔一段执行一次函数的效果，并且可以解决代码阻塞的问题

var
	ms = 500,
    endTime = new Date();
setTimeout(fn,ms);

function fn(){
    console.log(new Date() - endTime);
    while(new Date()-endTime <= ms*2 ){};
    endTime = new Date();
    // 循环调用
    setTimeout(fn,ms);
};

// 封装
function timer(){
    var
   	 	argArr = Array.prototype.slice.call(arguments),
        args = argArr.splice(2),
        off = true;
    setTimeout(function fn_(){
        if(off){
            argArr[0].apply(window,args);
            setTimeout(fn_,argArr[1]);
        }
    },argArr[1]);

    return function(){
        off = false;
    }
}

9.03 - 清除定时器

• clearInterval(idNum) / clearTimeout(idNum)

  • 代码案例

  var n = 0,timer = null;
  timer = setInterval(function(){
      console.log( n++ );
  },1000);
  
  // 点击document的时候清除定时器
  document.  = function(){
      clearInterval(timer);
      alert(\"清除了定时器：\" + timer);
  }

  var timer = setTimeout(function(){
      console.log( \"我执行了哟~\" );
  },1000);
  
  // 点击document的时候清除定时器
  document.  = function(){
      clearInterval(timer);
       alert(\"清除了定时器：\" + timer);
  }

  • 定时器的返回值

  实际上定时器的返回值是一个用于标识该定时器的ID值，具有唯一性但不一定有规律，我们可以通过这个ID值传递给清除定时器的函数来清除对应的定时器

  ​

9.04 - 定时器其他相关

定时器的队列

定时器在被调用的时候并不会立即执行，而是会被排列在一个等待执行的队列中，等待所有的同步代码执行完成之后再根据顺序执行队列之中的定时器

看下边的列子

setInterval(function(){
    console.log(\"a\");
},100);
console.log(\"b\");
setTimeout(function(){
    console.log(\"c\");
},0);
console.log(\"d\");

// 输出顺序？