防抖和节流

前言

防抖与节流函数是一种最常用的 高频触发优化方式，能对性能有较大的帮助。

正文

• 防抖 (debounce): 将多次高频操作优化为只在最后一次执行，通常使用的场景是：用户输入，只需再输入完成后做一次输入校验即可。

简单防抖函数

<button class="button"value="点"  type="button" name="button" >fdas</button>

let obutton = document.querySelector('.button')

obutton.addEventListener('click',debounce( ()=>{
console.log('aaa');
},1000),false)

function debounce(func, wait) {
let timer = null;
return function(...params) {
// 如果定时器存在则清除
if(timer){
clearTimeout(timer);
}
// 重新开始定时执行
timer = setTimeout(() => {
func.apply(this, params);
}, wait);
}
}

快速点击button只会弹出一个aaa

缺点：只能在最后执行，不能立即被执行，在某些情况下不适用。
改进：

let obutton = document.querySelector('.button')

obutton.addEventListener('click',debounce( ()=>{
console.log('aaa');
},1000,true),false)

function debounce(func, wait, immediate) {

let timer, context, args;

// 定时器
let later = function() {
return setTimeout(() => {
timer = null;
if(!immediate) {
func.apply(context, args);
}
}, wait);
}

return function(...params) {
if(!timer) {
timer = later();

// immediate 为 true，则立即执行
// 否则 缓存上下文 和 参数
if(immediate) {
func.apply(this, params);
} else {
context = this;
args = params;
}
} else {
clearTimeout(timer);
timer = later();
}
}
}

通过设置 immediate true或false来决定是否立即执行

• 节流(throttle): 每隔一段时间后执行一次，也就是降低频率，将高频操作优化成低频操作，通常使用场景: 滚动条事件 或者 resize 事件，通常每隔 100~500 ms执行一次即可。

<button class="button"value="点"  type="button" name="button" >fdas</button>

let obutton = document.querySelector('.button')

obutton.addEventListener('click',throttle( ()=>{
console.log('aaa');
},1000,true),false)

function throttle(fn, wait, immediate) {
let timer = null
let callNow = true

return function() {
let context = this,
args = arguments

if (callNow) {
fn.apply(context, args)
callNow = false
}

if (!timer) {
timer = setTimeout(() => {
fn.apply(context, args)
timer = null
}, wait)
}
}
}

设置wait来调节每次执行的间隔，第一次是立即执行。