文章目录
- 一文大白话讲清楚防抖和节流，设计封装防抖和节流，以及防抖和节流的应用场景
- 1. 防抖和节流的背景
- 2. 节流
- 3. 节流的应用场景
- 4. 防抖
- 5. 防抖应用场景
一文大白话讲清楚防抖和节流，设计封装防抖和节流，以及防抖和节流的应用场景
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. 防抖应用场景
