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)测试防抖测试节流一测试节流二

效果：

防抖。

节流，立即执行。

节流，延时执行。

注意事项

原理：闭包。每调用一次都会对应一个闭包。

不能够像下面这样写：

测试防抖测试节流一测试节流二

不然：

感谢你能够认真阅读完这篇文章，希望小编分享的"JavaScript如何实现防抖与节流"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!