前端性能优化之防抖、节流

本篇主要封装防抖、节流方法，并简述它们的使用场景：

防抖：

/**
* 如果短时间内触发多次同一事件，只执行一次
* @param {*} callback callback: 需要处理的回调函数
* @param {*} delay delay：期限
* @returns
*/
export function debounce(callback, delay) {
return function (event) {

// 如果上次事件还没有真正处理, 取消它
// if (callback.timeoutId) { // 会查找原型链
if (callback.hasOwnProperty('timeoutId')) { // 不会查找原型链
// 清除
clearTimeout(callback.timeoutId)
}

// 发事件发生指定事件后才调用处理事件的回调函数
// 启动定时器, 只是准备真正处理
callback.timeoutId = setTimeout(() => {
// 正在处理事件
callback.call(this, event)
// 删除准备处理的标记
delete callback.timeoutId
}, delay)
}
}

场景：1输入框的远程搜索，用户在规定的时间内连续输入文字不进行搜索，当输入完毕后，再进行搜索

　　　2.表单操作，防止用户短时间内双击或多次点击，造成重复提交

　　　3.window的resize事件，避免不断调整窗口大小而一直触发该事件，当调整结束后再调用该事件

节流：

/*
如果短时间内触发多次同一事件，那么在函数执行一次之后，在规定时间内不再触发，直至过了这段时间再次触发
callback: 传入回调函数
delay：间隔
*/
export function throttle(callback, delay) {
let pre = 0 // 默认值不要是Date.now() ==> 第1次事件立即调用
return function (event) { // 节流函数/真正的事件回调函数   this是发生事件的标签
const current = Date.now()
if (current - pre > delay) { // 只有离上一次调用callback的时间差大于delay
// 调用真正处理事件的函数, this是事件源, 参数是event
callback.call(this, event)
// 记录此次调用的时间
pre = current
}
}
}

场景：1.轮播图的翻页，避免翻页速度过快，影响页面观感

　　　2.window的scroll事件，每隔一段时间来触发scroll事件

　　　3.表单的提交，修改表单的时候，让其在一段时间内只能修改一次，避免短时间内修改很多次

脚踏实地行，海阔天空飞