JavaScript防抖与节流的实现与注意事项
作者：_雪菜肉丝面_
防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死,下面这篇文章主要给大家介绍了关于JavaScript防抖与节流的实现与注意事项,需要的朋友可以参考下
概念
防抖：点击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>
不然：
总结
到此这篇关于JavaScript防抖与节流的实现与注意事项的文章就介绍到这了,更多相关JS防抖与节流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！