IT源码网

怎样推迟某个函数的执行讲解

xmjava 2021年03月09日 编程语言 196 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(); 
  } 
}

 

发布评论
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

怎样获取网页加载到现在的时间讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。