JS：性能优化方案：防抖和节流

1、防抖函数

防抖用于减少函数请求次数，对于频繁的请求，只执行这些请求的最后一次。

/**
 * @param {function} func - 执行函数
 * @param {number} wait - 等待时间
 * @return {function}
 */
function debounce(func, wait = 300){
  let timer = null;
  return function(){ if(timer !== null){ clearTimeout(timer); } timer = setTimeout(func.bind(this),wait);
  }
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

应用示例

let scrollHandler = debounce(function(e){
  console.log('scroll')
}, 500)

window.onscroll = scrollHandler

  

 

  
1
  
2
  
3
  
4
  
5
 

2、节流函数

节流用于减少函数请求次数，与防抖不同，节流是在一段时间执行一次。

/**
 * @param {function} func - 执行函数
 * @param {number} delay - 延迟时间
 * @return {function}
 */
function throttle(func, delay){
  let timer = null
  return function(...arg){ if(!timer){ timer = setTimeout(()=>{ func.apply(this, arg) timer = null }, delay) }
  }
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
 

使用示例

let scrollHandler = throttle(function(e){
  console.log(e)
}, 500)

window.onscroll = scrollHandler

  

 

  
1
  
2
  
3
  
4
  
5
 

参考
10个非常实用的JS工具函数

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/119608100