怎样推迟某个函数的执行

方法1: 使用setTimeout();

function sayHi(){
    alert("Hi.");
}

setTimeout(sayHi, 2000);

方法2: 使用window.requestAnimationFrame();

var element = document.getElementById('animate');
element.style.position = 'absolute';

var start = null;

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  // 元素不断向左移，最大不超过200像素
  element.style.left = Math.min(progress / 10, 200) + 'px';
  // 如果距离第一次执行不超过 2000 毫秒，
  // 就继续执行动画
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

两者区别:

setTimeout()需要手动设置延迟时间, 而requestAnimationFrame()则是会推迟到浏览器下一次重流时执行. 因此, 前者比较通用, 后者主要是放一些需要操作DOM的方法函数, 这样有利于提升性能;

注意:

window.cancelAnimationFrame()可以用于取消其内回调函数的执行.

来源：https://www.cnblogs.com/aisowe/p/11718583.html

标签

时间戳