延迟执行

setTimeout(func, delay)

delay毫秒后，执行函数func()。

clearTimeout()

关闭定时器，例如：

let timeout_id = setTimeout(() => {
    console.log("Hello World!")
}, 2000);  // 2秒后在控制台输出"Hello World"
clearTimeout(timeout_id);  // 清除定时器

setInterval(func, delay)

每隔delay毫秒，执行一次函数func()。
第一次在第delay毫秒后执行。

clearInterval()

关闭周期执行的函数，例如：

  let func_id;
  $div.click(() => {
      if (func_id) return;
      func_id = setInterval(() => {
          console.log("hhh");
      }, 500);
  });
  $div.on("dblclick", () => {
      clearInterval(func_id);
  });

requestAnimationFrame(func)

该函数会在下次浏览器刷新页面之前执行一次，通常会用递归写法使其每秒执行60次func函数。调用时会传入一个参数，表示函数执行的时间戳，单位为毫秒，从页面被打开算起。

例如：

let step = (timestamp) => {  // 每帧将div的宽度增加1像素
    let div = document.querySelector('div');
    div.style.width = div.clientWidth + 1 + 'px';
    requestAnimationFrame(step);
};
requestAnimationFrame(step);

与setTimeout和setInterval的区别：

• requestAnimationFrame渲染动画的效果更好，性能更加。
  该函数可以保证每两次调用之间的时间间隔相同，但setTimeout与setInterval不能保证这点。setTmeout两次调用之间的间隔包含回调函数的执行时间；setInterval只能保证按固定时间间隔将回调函数压入栈中，但具体的执行时间间隔仍然受回调函数的执行时间影响。
• 当页面在后台时，因为页面不再渲染，因此requestAnimationFrame不再执行。但setTimeout与setInterval函数会继续执行。