JavaScript[20] -- 定时器

定时器

都是不精确的
定时器里的事件属于下一次事件队列,定时器时间再短,也是定时器后面的代码先执行,然后才是定时器里面的代码执行
每一个定时器都对应这一个序号,从1开始排列,用后需要清除定时器

setTimeout()

• 用来指定某个函数或字符串在指定的毫秒数之后执行,只会执行一次
• 第一参数为函数,作为执行体，第二个参数为执行间隔时间（毫秒）
  注意:对函数传递参数的时候,可以把实参放在执行间隔时间的后面(不兼容IE9及以下,在IE里面用闭包的形式去写)

clearTimeout()

• 清除定时器,参数为定时器的名称

  <script>
      // 不兼容IE9及以下
      var timer1 = setTimeout(function(a, b){
          console.log(a + b);     // 3
      },1000,1,2);
  
      document.onclick = function(){
          clearTimeout(timer1);    // 清除计时器1
          clearTimeout(timer2);    // 清除计时器2
  
          console.log("停止定时器 " + timer1);    // 停止定时器 1   
          console.log("停止定时器 " + timer2);    // 停止定时器 2 
      }
  
      // 兼容IE9及以下的闭包写法
      var timer2 = setTimeout((function(a, b){
          return function(){
              console.log(a + b); // 3
          }
      })(1,2),1000);
  </script>
  

setInterval()

• setInterval()和setTimeout()一样,但是会无限执行

clearInterval()

• 参数为定时器clearInterval()的名称

  <script>
      var str = "a";
      var obj = {
          str : "b",
          foo : func,
      }
      function func(){
          console.log(this.str);
      }
  
      let timer1 = setInterval(obj.foo,1000);     // a  不是b，函数作为参数传递会造成隐式丢失，this指向Window
      let timer2 = setInterval(function(){
          console.log("b");
      },1000);
  
      document.onclick = function(){
          console.log("停止定时器");
          clearInterval(timer1);
          clearInterval(timer2);
      }
      console.log(timer1,timer2);     // 1 2  此行代码优先于定时器里的代码执行
  </script> 
  

案例

• 5s后跳转百度

  <div id="wrap">页面将在<span>5s</span>之后跳转</div>
  <script>
      let oSpan = document.getElementsByTagName("span")[0],
          num = 5;
      let timer = setInterval(function(){
          num --;
          oSpan.innerHTML = `${num}s`;
          if(num===0){
              window.open("http://www.baidu.com","_self");
              clearInterval(timer);
          }
      },1000);
  </script>  
  

requestAnimationFrame()

• 现在做动画使用的帧函数（不兼容IE10及以下）
  注意：它除了在外部执行函数体,也要在执行函数体里面自己执行

• cancelAnimationFrame()清除定时器

  <script>
      // 这是requestAnimationFrame的兼容写法
      window.requestAnimationFrame = (function(){
         return  window.requestAnimationFrame ||
                 window.webkitRequsetAnimationFrame ||
                 window.mozRequestAnimationFrame ||
                 window.oRequestAnimationFrame ||
                 window.msRequestAnimationFrame ||
                 function(callback){
                     window.setTimeout(callback,1000/60);
                 };
     })();
     
     let a = 0;
     
     function func(){
         a++;
         console.log(a);
         requestAnimationFrame(func);
     }
     
     requestAnimationFrame(func);
  </script>