函数防抖与节流印象中都是为了控制函数执行频率,比如避快速点击提交按钮多次提交、避免模糊搜索框keyup事件监听时快速打字每次都去调用一次查询接口、避免页面滚动监听事件快速执行影响性能等;之前对防抖和节流的具体概念缺乏了解,比如他们有啥区别?具体是怎么样的?如何方便的理解这两个概念?翻了翻资料,结合自己的理解与思考整理如下
防抖
名词解释
触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间
example1: 模糊搜索框keyup事件监听,始终要等到用户输入告一段落后才会执行数据查询
example2: 游戏释放技能有一个准备时间,当准备阶段被打断时,需要重新走技能准备,准备完成才能够释放技能
代码实现
/**
* 防抖
* @param fn 需要做防抖处理的函数
* @param delay 技能准备(延迟)执行时间
* @returns {Function}
*/
function debounce(fn, delay = 500) {
let time = null
return () => {
clearTimeout(time)
time = setTimeout(() => {
fn.apply(this, arguments)
}, delay)
}
}
// 只会打印debounce2
const debounceTest = debounce((param) => { console.log(param) })
debounceTest('debounce1')
debounceTest('debounce2')
节流
名词解释
高频事件触发,但在n秒内只会执行一次
example1:查询按钮,第一次可以立即点击,防止快速点击控制3s之内只能点一次
example2:游戏技能冷却,可用时随时可立即执行,当执行后有一个冷却时间
代码实现
/**
* 节流
* @param fn 需要做节流处理的函数
* @param limit 技能的冷却(限制)时间
* @returns {Function}
*/
function throttle(fn, limit = 500) {
let flag = true
return () => {
if (flag) {
fn.apply(this, arguments)
flag = false
setTimeout(() => { flag = true }, limit)
}
}
}
// 只会打印throttle1
const throttleTest = throttle((param) => { console.log(param) })
throttleTest('throttle1')
throttleTest('throttle2')
作者公众号: