JS防抖与节流
_雪菜肉丝面_ 人气:0概念
防抖：点击N次提交按钮，只有最后一次会发出请求。减少无效请求的次数。
节流：每点击一次按钮，都会失效一段时间。降低触发的频率。
实现
/*
防抖
时限内，只有最后一次调用会执行
*/
function debounce(func, interval = 0) {
let timer;
return function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
func()
}, interval)
}
}
/*
节流
执行之后会失效一段时间
*/
function throttle(fn, interval=0, immediate=true) {
let valid = true
return function () {
if (!valid) {
return
}
valid = false
if (immediate) {
fn()
setTimeout(() => {
valid = true;
}, interval)
} else {
setTimeout(() => {
fn()
valid = true;
}, interval)
}
}
}测试
function say() {
console.log(1)
}
var a = debounce(say, 1000)
var b = throttle(say, 1000)
var c = throttle(say, 1000, false)
<button onclick="a()">测试防抖</button>
<button onclick="b()">测试节流一</button>
<button onclick="c()">测试节流二</button>
效果：
防抖。
节流，立即执行。
节流，延时执行。
注意事项
原理：闭包。每调用一次都会对应一个闭包。
不能够像下面这样写：
<button onclick="debounce(say, 1000)()">测试防抖</button> <button onclick="throttle(say, 1000)()">测试节流一</button> <button onclick="throttle(say, 1000, false)()">测试节流二</button>
不然：
总结
加载全部内容