一、防抖
1、什么是函数的防抖
概念:函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间。
2、为什么需要防抖
前端开发过程中,有一些事件,常见的例如,onresize,scroll,mousemove ,mousehover 等,会被频繁触发(短时间内多次触发),不做限制的话,有可能一秒之内执行几十次、几百次,如果在这些函数内部执行了其他函 数,尤其是执行了操作 DOM 的函数(浏览器操作 DOM 是很耗费性能的),那不仅会浪费计算机资源,还会降低 程序运行速度,甚至造成浏览器卡死、崩溃。
3、函数防抖的基本思路
使用setTimeout来延迟执行函数,当函数在倒计时结束前再次触发时,则清空setTimeout函数,重新计时,直到计时结束。
4、防抖的实现
<button id="btn"></button>
let timer=null
let btn=document.getElementById('btn')
btn.addEventListener('click',()=>{
if (timer) {
//事件重复点击时,防止计时器叠加,先清除再创建计时器
clearTimeout(timer)
}
timer=setTimeout(()=>{
console.log('触发事件!');
},2000)
})
二、节流
节流与防抖类似,在规定时间内只能触发一次函数。
思路是:获取触发函数的时间戳,若触发时间-上次触发时间>规定的时间,才能执行函数。
function fun(){
console.log(1)
}
$('button').on('click',trottle(fun,2000))
function trottle(fn,delay){
var begin = 0
return function(){
var cur = new Date().getTime()
if(cur - begin > delay){
fn()
begin = cur
}
}
}
此时创建的函数都只是最基本的功能实现,再具体使用中会遇见各种问题,想写出更加完善,完美实现功能的函数还需要持之以恒的学习。