一文大白话讲清楚防抖和节流，设计封装防抖和节流，以及防抖和节流的应用场景

一文大白话讲清楚防抖和节流，设计封装防抖和节流，以及防抖和节流的应用场景

1. 防抖和节流的背景

• 我们可能会遇到这么一种情况，你在页面上写了一个按钮，点一下这个按钮，就能刷新一下这个页面
• 这时候有个哥们，他就想在想，如果我一直不停的点，会怎么样，于是他就以三十年单身的手速嘎嘎嘎嘎一直点。
• 这时候你的页面就要不断地刷新，向服务器拉取资源，造成了极大的资源浪费。
• 于是你就想，我有没有可能限制他一下，怎么限制呢，点还是让你点，不让你点你跟我急。
• 但是你点完以后我执不执行，或者怎么执行，那就是我的事了。于是，我想出了两个办法。
• 第一种办法，我设置一个时间段，这个时间段不管你点了多少次，我只执行你对后点的那一次，这样既不影响你点，我还能少执行。这就是节流
• 第二种办法，我设置这么个逻辑，你点一下，我就让你当前的点击延迟N秒后再执行，如果你在延迟等待的时间里又点了一次，那就重新开始计时N秒再执行，直到有一次N秒倒计时结束了，那就执行。这就是防抖。

2. 节流

• n秒内只运行一次，若在n秒内重复触发，只有一次生效
• 设计封装一个节流器，上代码

<div><button id="button">click me</button>
</div><script>function throttled(fn,delay=2000){let timer=null;return function (...args){if(!timer){timer=setTimeout(()=>{fn.apply(this,args)timer=null;},delay)}}}function print(){console.log('节流')}document.getElementById('button').addEventListener('click',throttled(print,2000))
</script>

3. 节流的应用场景

• 滚动加载，加载更多，滚动到底部监听
• 搜索框联想

4. 防抖

• n秒后执行该事件，若在n秒内被触发，则重新计时n秒
• 设计封装一个防抖器，上代码

<div><button id="button">click me</button>
</div><script>function throttled(fn,delay=2000){let timer=null;return function (...args){clearTimeout(timer)timer=setTimeout(()=>{fn.apply(this,args)},delay)}}function print(){console.log('防抖')}document.getElementById('button').addEventListener('click',throttled(print,2000))
</script>

5. 防抖应用场景

• 窗口发小resize
• 表单校验等