什么是防抖和节流?手写一个防抖函数和节流函数?
1.防抖(debounce)
当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。
当你频繁触发后,n秒内只执行一次。
function test() {
console.log('防抖')
}
window.addEventListener('mousemove', debounce(test, 1000));
function debounce(func, wait) {//核心代码
var timer,
wait = +wait || 0;
return function () {
var context = this
var args = arguments
timer ? clearTimeout(timer) : func.apply(context, args);
timer = setTimeout(function () {
func.apply(context, args)
}, wait);
}
}
2.节流(throttle)
当持续触发事件时,保证一定时间段内只调用一次事件处理函数。
在固定的时间内触发事件,每隔n秒触发一次
function throttle(func, wait) {//核心代码
var timer,
wait = +wait || 0;
return function () {
var context = this;
var args = arguments;
if (!timer) {
func.apply(context, args)
timer = setTimeout(function () {
timer = null;
}, wait)
}
}
}
应用场景:
搜索框搜索时,用户在不断输入值时,用防抖来节约请求资源。
频繁操作点赞和取消点赞,因此需要获取最后一次操作结果并发送给服务器
登录按钮或者其他什么按钮,用户鼠标不断点击触发,mousedown(单位时间内只触发一次)
window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步