怎样推迟某个函数的执行

xmjava 2021年03月09日编程语言 435 0

方法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()可以用于取消其内回调函数的执行.

方法3: 使用window.requestIdleCallback()将内部函数推迟到系统资源空闲时执行;

用法和window.requestAnimationFrame()类似, 只是推迟条件不同. 同时也有一个取消执行的方法: window.cancelIdleCallback()

requestIdleCallback(myNonEssentialWork); 
 
function myNonEssentialWork(deadline) { 
  while (deadline.timeRemaining() > 0) { 
    doWorkIfNeeded(); 
  } 
}