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>
不然:
总结
加载全部内容