js防抖函数节流函数：2个场景2分钟看懂

什么是js防抖函数？什么是js节流函数？说句让大家见笑的话，前端搞了3年多，不知道什么是js防抖函数节流函数，是不是有些丢人，哈哈！如果不是看看面试题，我将继续丢人中，为什么呢？首先这种场景不常见，其次，即使你能解决这类场景，你不一定知道它的专业术语叫：防抖函数、节流函数。

场景1：文章详情页面中有点赞的功能，如果用户在一秒内点击了5次，我们是不是要发送5个ajax请求呢？如果是，估计我们离…不远了（哈哈哈，偷笑一会）

解决方案：使用js防抖函数；频繁触发，但只在特定的时间内没有触发执行条件才执行一次代码

上代码：

<script>    
// 防抖函数    
window.onscroll = debounce(play, 1000);
function debounce(fn, delay) {      
let timer = null;  //闭包     
return function () {
if (timer) {          
clearTimeout(timer);        
}        
timer = setTimeout(fn, delay)}}
function play() {      
console.log(‘滚动’)    
}  
</script>

场景2：页面连续滚动中我想获取某个元素的高度，如果不去处理，就会有个问题，获取高度的函数会不断执行，这样无疑会影响浏览器的性能

解决方案：js节流函数； 频繁触发,但只在特定的时间内才执行一次代码

上代码：

<script>    
// 节流    
document.getElementById(“btn”).addEventListener(‘click’, throttle(play, 1000))

function throttle(fn, delay) {      
let timer = null;      
return () => {        
if (timer) {          
return false;        
}
timer = setTimeout(() => {         
timer = null;          
play();        
}, delay)      
}    
}

function play() {      
console.log(‘点赞+1’);    
}  
</script>

以上就是js防抖函数节流函数的全部内容，欢迎大家一起讨论交流。