转载
前言
js防抖和节流函数不仅是前端面试中经常问到的问题,也是我们平常开发中频繁处理dom事件时会用到的。
在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数频繁调用,会加重浏览器的的负担,导致用户体验非常糟糕。此时,我们就可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。
一、函数防抖
函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。如下图,持续触发scroll事件时,并不执行handle函数,当1000毫秒内没有触发scroll事件时,才会触发scroll事件。
在这里插入图片描述
如何实现
<button id="btn">按钮</button>
function debounce(fn,delay) {
//记录上一次的计时器
var timer = null;
return function(){
//清除上一次的计时器
clearTimeout(timer)
timer = setTimeout(function(){
fn.apply(this)
},delay)
}
}
document.getElementById('btn').onclick = debounce(function(){
console.log('点击事件被触发'+Date.now());
},1000)
2.函数防抖的应用场景
对于连续的事件响应我们只需要执行一次回调:
每次 resize/scroll 触发统计事件
按钮点击事件
二、函数节流
函数节流(throttle):一个函数执行一次后,只有大于设定的执行周期后才会执行第二次。
- 如何实现
html,body{
height: 500%;
}
function throttle(fn,delay) {
//记录上一次触发的时间
var lastTime = 0;
return function(){
//记录当前函数触发的时间
var nowTime = Date.now();
if(nowTime - lastTime > delay){
//修正this问题
fn.call(this);
//同步时间
lastTime = nowTime;
}
}
}
document.onscroll = throttle(function () {
console.log('scroll事件触发'+Date.now());
},200)
2.函数节流的应用场景
需要间隔一定时间触发回调来控制函数使用频率:
DOM 元素的拖拽功能实现(mousemove)
计算鼠标移动的距离(mousemove)
onScoll
最后
用一句话总结防抖和节流的区别:防抖是将多次执行变为最后一次执行,节流是将多次执行变为每隔一段时间执行。