共计 648 个字符,预计需要花费 2 分钟才能阅读完成。
// 节流——高频事件触发,但在 n 秒内只会执行一次,所以节流会浓缩函数的执 行频率。
function throttle(fn, timer) {
// 初始化标识为 true,并应用闭包缓存起来
let flag = true
return () => {if (flag) {fn();
// 执行一次事件后将标识标记为 false
flag = false
timeout = setTimeout(_ => {
// 延时肯定工夫后将标识标记为 true
flag = true
}, timer)
}
}
}
// 防抖——触发高频事件后 n 秒后函数只会执行一次,如果 n 秒内高频事件再 次被触发,则从新计算工夫;function debounce(fn, timer) {
let flag = true, timeout = null
return () => {
// 实现延时执行办法
let setTimeoutFn = _ => {
timeout = setTimeout(_ => {fn()
// 残缺执行一次延时事件后,使标记改为 true
flag = true
}, timer)
}
if (flag) {
flag = false
// 第一次触发事件,调用延时办法
setTimeoutFn()} else {
// 当用户触发事件之后间断触发时,革除掉之前的定时器,从新计时。clearTimeout(timeout)
setTimeoutFn()}
}
}
const inputA = throttle(_ => { console.log('A') }, 1000)
const inputB = debounce(_ => { console.log('B') }, 1000)
正文完
发表至: javascript
2021-03-16