什么是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防抖函数节流函数的全部内容,欢迎大家一起讨论交流。

微信交流(备注:前端)