setTimeout

setTimeout

用 setTimeout 实现 setInterval

{
  const intervals = new Map();

  function setInterval(fn, time, context, ...args) {
  	// 随机生成一个 ID
    const id = Math.floor(Math.random() * 10000);

    intervals.set(id, setTimeout(function next() {
       intervals.set(id, setTimeout(next, time));
       fn.apply(context, args);
    }, time));
    return id;
  }

  function clearInterval(id) { 
    clearTimeout(intervals.get(id));
  }

}

如何使用:

const interval = setInterval(console.log, 100, console, "hi");
clearInterval(interval);

requestAnimationFrame

  • 作用:告诉浏览器在下一次 repaint 的时候,更新你的动画,也就是说这个是转为动画设计的 API
  • requestAnimationFrame调用时机:浏览器的 repaint 阶段
  • 使用 requestAnimationFrame,只有你的网站页面的 Tab 页处于 visible 的时候,浏览器才会去运行你的动画。更省 CPU、更省 GPU、更省内存、更节约电量。
  • 动画至少 60帧/秒,看起来才更流畅:
setInterval(function() {
  // animiate something
}, 1000/60);