前言
函数防抖(debounce)和 函数节流(throttle)是干嘛用的?
答:为了优化函数触发频率过高导致响应速度跟不上触发频率出现延迟、假死或卡顿等现象。
一、防抖(debounce)
1、什么是防抖?
防抖是触发高频率事件后n秒内函数只执行一次。如果n秒后高频事件再次被触发,则重新计算。打个比方来说,喜欢打王者荣耀的伙伴都知道,没血了需要回城补血,这时候点击回城,开始进度条回城,如果进度条正在跑不小心又点到回城,回城又开始重新算。
2、防抖实现
思路:
- 触发高频率函数,定义一个定时器来延迟触发
- 重新触发时,如果定时器存在则清除重置定时器
代码实现:
//获取元素
var input = document.getElementById('input')
//防抖
//触发事件
function handle(e){
console.log(e.target.value);
}
function debounce(fn){
var timer
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(()=>{
//arguments就是传入的参数数组,而且个数可以不确定的传回给fn
fn.apply(this,arguments)
},1000)
}
}
input.addEventListener('input',debounce(handle))
二、节流(throttle)
1、什么是节流?
节流是高频事件触发,但在n秒内只执行一次。节流会稀释函数的执行频率。就像水滴,固定时间2秒滴一滴水,那么就会2秒滴一滴,4秒...6秒...
2、节流实现
思路:
- 设置一个变量,当作开关,true的话才能进入函数,进入后变成false
- 通过定时器在规定时间后才能进入执行函数触发
代码实现:
//获取元素
var input = document.getElementById('input')
//节流
function handle(e){
console.log(e.target.value);
}
function throttle(fn){
//定义一个状态
let flag = true
return function(){
if(!flag) return
flag = false;
fn.apply(this,arguments)
setTimeout(()=>{
flag=true
},1000)
}
}
input.addEventListener('input',throttle(handle))
三、总结(结合上述代码)
防抖:在规定时间内触发会重置,如果用户在input框一直输入的话,函数就一直不会执行
节流:规定时间内只触发一次,input框输入值后立马执行,然后无论input值怎么改变不会触发,直到规定时间过后再次触发...