前端知识体系

Appearance

大纲

计时相关问题 ​

使用闭包实现每隔一秒打印 1,2,3 ​

js
// code1
const counter = (max) => {
  for (let i = 1; i <= max; i++) {
    setTimeout(console.log, i * 1000, i)
  }
}
counter(3)

如果要求使用 Promise 实现，且要循环输出呢？

答案
js
const counter = (max) => {
  const arr = Array.from({ length: max }, (x, i) => i)
  arr.reduce((p, item) => {
    return p.then(() => {
      return new Promise((resolve) => {
        setTimeout(() => resolve(console.log(item)), 1000)
      })
    })
  }, Promise.resolve())
}

counter(3)

使用 setTimeout 模拟实现 setInterval ​

js
// 精简版本
function mySetInterval(handler, timeout = 0) {
  setTimeout(() => {
    arguments[0]()
    mySetInterval(...arguments)
  }, arguments[1] || 0)
}
js
// 支持清除定制器功能
function mySetInterval(handler, timeout = 0) {
  let timer = {
    value: 0,
    valueOf: function () {
      return this.value
    }
  }
  function myTimer(...rest) {
    timer.value = setTimeout(() => {
      rest[0]()
      myTimer(...rest)
    }, rest[1])
  }
  myTimer(...arguments)
  return timer
}

mySetInterval.clear = (timer) => {
  clearTimeout(timer)
}

// testing
const timer1 = mySetInterval(() => {
  console.log(111)
}, 1000)
const timer2 = mySetInterval(() => {
  console.log(222)
}, 1100)

setTimeout(() => {
  mySetInterval.clear(timer1)
}, 5000)
setTimeout(() => {
  mySetInterval.clear(timer2)
}, 9000)
js
function mySetInterval(fn, timeout) {
  // 控制器，控制定时器是否继续执行
  var timer = {
    flag: true
  }
  // 设置递归函数，模拟定时器执行。
  function interval() {
    if (timer.flag) {
      fn()
      setTimeout(interval, timeout)
    }
  }
  // 启动定时器
  setTimeout(interval, timeout)
  // 返回控制器
  return timer
}

// testing
const timer1 = mySetInterval(() => {
  console.log(111)
}, 1000)
const timer2 = mySetInterval(() => {
  console.log(222)
}, 1000)

setTimeout(() => {
  timer1.flag = false
}, 5000)
setTimeout(() => {
  timer2.flag = false
}, 9000)

浏览器中 setInterval 定义 ​

long setInterval(in any handler, in optional any timeout, in any... args)

  1. 该方法返回的句柄是不变的 long 值（通过该句柄去取消定时器）
  2. 该方法的执行上下文必须是 window, WorkerUtils

格式: mySetInterval(handler, ?timeout, ...args)

思考

为什么要用 setTimeout 模拟实现 setInterval？

setInterval 的缺陷是什么？

扩展: 我们能反过来使用 setinterval 模拟实现 settimeout 吗？

点我查看详细
js
const mySetTimeout = (fn, time) => {
  const timer = setInterval(() => {
    clearInterval(timer)
    fn()
  }, time)
}

如何实现一个 0ms 的 setTimeout? ​

setTimeout 为什么最小只能设置 4ms，如何实现一个 0ms 的 setTimeout?

点我查看详细
js
let timeouts = []
const messageName = 'zero-settimeout'

function setTimeoutZero(fn) {
  timeouts.push(fn)
  window.postMessage(messageName, '*')
}

function handleMessage(evt) {
  if (evt.source == window && evt.data === messageName) {
    if (timeouts.length > 0) {
      const f = timeouts.shift()
      f()
    }
  }
}

window.addEventListener('message', handleMessage)

window.zeroSettimeout = setTimeoutZero