22 定时器

技术交流QQ群:1027579432，欢迎你的加入！

1.两种定时器

• window对象给我们提供了两个非常好用的方法-定时器。
  • setTimeout()：用于设置一个定时器，该定时器在定时器到期后执行调用函数。
    • 注意：
      • window可以省略；
      • 这个调用函数可以直接写函数，或者写函数名或者采取'函数名()'三种形式，第三种方式不推荐；
      • 延迟时间的单位是毫秒，默认的0；
      • 因为定时器可能有很多，所以经常给定时器赋值一个标识符(自定义的定时器名字)；

          window.setTimeout(调用函数,[延迟的毫秒数]);

  • setTimeout()参数中的调用函数也称为回调函数callback。普通函数是按照代码顺序直接调用，而回调函数需要等待时间，时间到了才会去调用这个函数，因此称为回调函数。
  • 之前介绍的element.onclick = function(){}或者element.addEventListener('click',function(){});里面的函数也是回调函数。
  • 停止定时器clearTimeout()：取消了先前通过调用setTimeout()建立的定时器。
    • 注意：
      • window可以省略；
      • 里面的参数就是定时器的标识符(自定义的定时器名字)；

          window.clearTimeout(timeoutID);

  • setInterval()：重复调用一个函数，每隔这个时间，就去调用一次回调函数。
    • 注意：
      • window可以省略；
      • 这个调用函数可以直接写函数或者写函数名或者采用字符串'函数名()'三种形式；
      • 间隔的毫秒数默认是0，如果写，必须是毫秒。表示每隔多少毫秒就自动调用这个回调函数。
      • 因为定时器可能有很多，所以经常给定时器赋值一个标识符(自定义的定时器名字)；

          window.setInterval(回调函数,[间隔的毫秒数]);

  • 停止定时器clearInterval()：取消先前通过调用setInterval()建立的定时器。
    • 注意：
      • window可以省略；
      • 里面的参数就是定时器的标识符(自定义的定时器名字)；

          window.clearInterval(intervalID);

  • this的指向：this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁。一般情况下，this最终指向的是那个调用它的对象。
    • 全局作用域或普通函数中this指向全局对象window(注意定时器里面的this指向window)；
    • 对象的方法中谁调用this，它就指向谁；
    • 构造函数中this指向构造函数中的实例；

2.资料下载

• 笔记及代码，欢迎star,follow,fork......