Dom阶段实战案例

window定时器

◼ 有时我们并不想立即执行一个函数，而是等待特定一段时间之后再执行，我们称之为“计划调用（scheduling a call）”。
◼ 目前有两种方式可以实现：
    setTimeout 允许我们将函数推迟到一段时间间隔之后再执行。
    setInterval 允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数。
◼ 并且通常情况下有提供对应的取消方法：
    clearTimeout：取消setTimeout的定时器；
    clearInterval：取消setInterval的定时器；
◼ 大多数运行环境都有内置的调度程序，并且提供了这些方法：
    目前来讲，所有浏览器以及Node.js 都支持这两个方法；
    所以我们后续学习Node的时候，也可以在Node中使用它们；

setTimeout的使用

◼ setTimeout的语法如下：
let timerId = setTimeout(func|code,[delay],[arg1],[arg2],.....)
   func|code：想要执行的函数或代码字符串。
    ➢ 一般传入的都是函数，由于某些历史原因，支持传入代码字符串，但是不建议这样做；
   delay：执行前的延时，以毫秒为单位（1000 毫秒= 1 秒），默认值是0；
   arg1，arg2…：要传入被执行函数（或代码字符串）的参数列表；
◼ clearTimeout方法：
   setTimeout 在调用时会返回一个“定时器标识符（timer identifier）”，我们可以使用它来取消执行。
案例:
    // 拿到定时器标识符 timeOutID
     var timeOutID =  window.setTimeout(function(){
              console.log("foo被调用---")
      },1000)
      // console.log(timeOutID)
      var timeOutEl = document.querySelector("button")
      timeOutEl.onclick = function(){
        // 取消调用
        clearTimeout(timeOutID)
      }

setInterval的使用

◼ setInterval 方法和 setTimeout的语法相同：
let timerId = setInterval(func|code,[delay],[arg1],[arg2],.....)
     所有参数的意义也是相同的；
     不过与setTimeout只执行一次不同，setInterval是每间隔给定的时间周期性执行；
◼ clearInterval方法：
    setInterval也会返回一个“定时器标识符（timer identifier）”，我们可以通过clearInterval来取消这个定时器。
◼ 关于定时器还有一些宏任务相关的概念，我们会在JavaScript高级中讲解。