JavaScript中函数防抖、节流
<h3 id="码文不易转载请带上本文链接感谢-httpswwwcnblogscomechoyyap14565642html">码文不易，转载请带上本文链接，感谢~ https://www.cnblogs.com/echoyya/p/14565642.html</h3><p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>码文不易，转载请带上本文链接，感谢~ https://www.cnblogs.com/echoyya/p/14565642.html</li><li>函数节流</li><li>函数防抖</li></ul></div><br>
<strong>函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。</strong><p></p>
<p>以监听页面滚动为例，分别看一下<code>普通滚动</code>，<code>函数节流</code>，<code>函数防抖</code>三者的实现效果。</p>
<p><img src="https://img2020.cnblogs.com/blog/1238759/202103/1238759-20210322133025170-227284166.gif" alt="" loading="lazy"></p>
<h3 id="函数节流">函数节流</h3>
<blockquote>
<p>函数节流：是指在高频事件触发期间，n秒内函数只会执行一次。</p>
</blockquote>
<ul>
<li>比如人眨眼睛，就是一定时间内眨一次。</li>
<li>再比如就是游戏中的技能CD，按下技能以后，再规定的时间内，你再按也没用，只能冷却好了再按。</li>
</ul>
<p>使用场景：<code>click</code>、<code>onMouseOver</code>，<code>onMouseMove</code>，<code>resize</code>，<code>input</code>，<code>scroll</code>等</p>
<pre><code>// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
// 判断是否已空闲，如果在执行中，则直接return
return;
}
canRun = false;
setTimeout(function(){
console.log("函数节流");
canRun = true;
}, 1000);
}
</code></pre>
<p>函数节流的要点：声明一个标志位，设置执行的时间间隔，记录当前代码是否在执行，如果空闲，则可以正常触发方法执行，反之则取消这次方法执行，直接<code>return</code>。</p>
<ol>
<li>
<p>监听<code>id = throttle</code>元素的滚动事件。当<code>canRun</code>为<code>true</code>，代表当前滚动处理事件是空闲的，可以使用。然后下一步的操作就是<code>canRun=false</code>。这样其他请求执行滚动事件的方法，就被return。</p>
</li>
<li>
<p><code>setTimeout</code>设置1000ms时间间隔，执行定时器中的回调函数，释放标志位，允许执行下一次滚动事件。</p>
</li>
<li>
<p>若具体执行的方法是一个回调函数，也可以将<code>canRun=true</code>放到<code>callback</code>中。只要理解了函数节流基本原理，改造就会得心应手。</p>
</li>
</ol>
<h3 id="函数防抖">函数防抖</h3>
<blockquote>
<p>函数防抖：是指触发高频事件n秒后函数会执行一次，如果n秒内高频事件被再次触发，则重新计算时间；在整个过程中，事件函数只会被执行一次。</p>
</blockquote>
<ul>
<li>比如坐公交，在一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有没有人再刷卡了，司机才开车。</li>
<li>再比如游戏中的buff，吃了bull，开始倒计时，此时又吃了一个buff，则重新记时。</li>
</ul>
<p>使用场景：<code>click</code>、<code>onMouseOver</code>，<code>onMouseMove</code>，<code>resize</code>，<code>input</code>，<code>scroll</code>等</p>
<pre><code class="language-javascript">// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
timer = setTimeout(function(){
console.log("函数防抖");
}, 1000);
};
</code></pre>
<p>函数防抖的要点：也需要一个定时器来辅助实现代码延迟执行。如果计时未完之前，方法被多次触发，则清除上次记录的定时器标记，重新开始。若计时完毕，没有继续触发方法，则执行逻辑代码。</p>
<ol>
<li>
<p>监听<code>id = debounce</code>元素的滚动事件，首先就是清除上次未执行的<code>setTimeout</code>的引用<code>timer</code></p>
</li>
<li>
<p><code>clearTimeout</code>方法，允许传入无效的值。所以直接执行<code>clearTimeout</code>即可。</p>
</li>
<li>
<p>将需要执行的代码放入setTimeout定时器中，再返回定时器引用给<code>timer</code>缓存。</p>
</li>
<li>
<p>如果倒计时结束，没有新的方法触发滚动事件，则执行<code>setTimeout</code>中的代码。</p>
</li>
<li>
<p>函数防抖的原理，就是巧用<code>setTimeout</code>做缓存池，并且可以轻易地清除待执行代码。</p>
</li>
</ol><br><br>
来源：https://www.cnblogs.com/echoyya/p/14565642.html
頁:
[1]