JavaScript怎么避免抖动，节流的应用要注意什么
导读：这篇文章主要给大家介绍“JavaScript怎么避免抖动，节流的应用要注意什么”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“JavaScript怎么避免抖动，节流的应用要...
这篇文章主要给大家介绍“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怎么避免抖动，节流的应用要注意什么”的介绍了，感谢各位的阅读，希望文本对大家有所帮助。如果想要了解更多知识，欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： JavaScript怎么避免抖动，节流的应用要注意什么
本文地址： https://pptw.com/jishu/654372.html