一、防抖
1、防抖的原理:
当事件(如onscroll)触发后,用户可能不停的触发该事件,以最后一次触发该事件开始计算执行时间(如300ms),执行时间到后才去执行相应的回调函数。用一个线段如下图来表示:在A点第一次触发事件onscroll,开始计算执行时间;在B点再次触发事件,该点还在300ms内,重新计算执行时间;在C点再次触发事件,该点在第2个300ms以内,重新计算执行时间,到D点,第3个300ms执行时间已到,才执行回调函数。
2、防抖的应用场景:
1、滚动条scroll事件滚动,当滚动条停止滚动一段时间后才开始计算是否到达页面底部,再执行加载操作等回调函数。
2、搜索框输入查询(输入完后再发送ajax请求)
3、表单验证(表单输入完后再进行验证)
4、按钮提交事件(如果用户不停点击按钮,以最后一次点击为准)
5、浏览器窗口缩放,resize事件,当用户不再缩放窗口一段时间后,才去调用回调函数。
3、手写防抖代码:
function debounce(fn,wait){
let timeout = null
return function(...args){ //闭包,返回的函数暂且称为returnFunc
if(timeout){
clearTimeout(timeout)
}
timeout = setTimeout(()=>{
//调用fn函数,并修改this指针为container而不是window,args是调用returnFunc时传递的参数
fn.apply(this,args)
},wait)
}
}
let count = 0
const container = document.querySelector('.content')
function callbackFunc(){
container.innerHTML = count++
}
//这里onmousemove事件触发后,会调debounce函数返回的函数returnFunc,onmousemove事件触发后浏览器会创建并传递一个event参数,returnFunc也会接收到这个event参数
container.onmousemove = debounce(callbackFunc,2000)
二、节流
1、节流的原理
节流是某个事件触发后,每隔一段时间才处理一次。如:当事件(如onscroll)触发后,用户可能不停的触发该事件,每隔一段时间才执行相应的回调函数。
正如上图所示,假如事件间隔是10s,在A点,也就是起点时,开始触发事件,默认调回调函数做出响应,在0-10s期间一直在触发事件,但该期间没有调回调函数,到第10s时间间隔到了才做出一次响应,10-20s区间一样也是一直触发事件但不做出响应,到20s做出一次响应。在D点(位于20-30s之间)停止触发事件,没有到时间间隔,默认不再调回调函数。
2、节流的应用场景
1、DOM元素的拖拽,比如隔一段时间,输出当前DOM元素的坐标
2、计算鼠标移动的距离,鼠标移动时,每隔一段时间鼠标移动的距离;
3、监听scroll滚动,滚动一段时间会请求数据等。
3、手写防抖函数
//这里只实现了开始时是否响应的情况(默认开始响应),尾部是否响应的情况没有实现(默认尾部不响应)
function throttle(func, limit,{leading = true,trailing = false} = {}) {
let startTime = 0
return function(){
let nowTime = new Date().getTime()
if(!leading && startTime === 0) { //这里确保是第一次进来
//当leading是false时,也就是不需要首次进来时执行回调函数,这是将startTime赋值成nowTime就会导致limit - (nowTime - startTime) >0 而不会执行func函数
startTime = nowTime
}
if(limit - (nowTime - startTime) <= 0){ //到了间隔时间,要开始执行函数
func.apply(this,arguments)
startTime = nowTime
}
}
}
let count = 0
const container = document.querySelector('.content')
function callbackFunc(){
container.innerHTML = count++
}
container.onmousemove = throttle(callbackFunc,2000)
三、总结
防抖和节流的原理不同,导致其应用场景也不同,大家根据自身的需求来选择防抖还是节流来实现。