防抖？节流？

最新推荐文章于 2024-08-08 09:07:02 发布

CI-DN

最新推荐文章于 2024-08-08 09:07:02 发布

阅读量358

点赞数 2

文章标签：开发语言

本文链接：https://blog.csdn.net/m0_65753088/article/details/124269805

版权

本文介绍了JavaScript中防止频繁触发事件导致性能问题的两种策略：防抖和节流。通过lodash库，演示了如何实现输入框输入事件的防抖处理以及按钮点击事件的节流处理，以提升用户体验并减轻服务器压力。

摘要由CSDN通过智能技术生成

各位小伙伴们，首先我们要清楚什么情况下需要防抖和节流。当事件被监听时，处理函数被多次频繁调用，这样会增加我们服务器的压力，故而造成页面卡顿混乱，给用户体验感降低，那么这个时候，就需要我们进行一些控制来防止此类情况的发生，故此我们会用到防抖和节流。

那么我们先说防抖的作用：使前面的所有触发都被取消，最后一次执行在规定时间之后才会触发，也就是说，如果连续快捷的触发，那么该事件触发只会执行一次，前面的操作均不作数。相当于设定妈妈喊你切菜，但是紧跟着说菜没有了，让你去楼下超市买，但是来回时间不够了，算了就去煮方便面吧，那么你只需要去煮方便面即可。前面的操作凭借客观原因也就是系统判定已经不成立不作数了。

然后我们说节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发。也相当于说系统设定如果有犯错那么妈妈三天打你一顿，这样在三天之内，不管你犯错次数多到擢发难数，还是就有一次不小心说话声音大了一些，也就是dang 犯错次数>0，那么第三天妈妈必然会打你一顿，并且只有一顿。

当我们清楚这些之后呢，我们可以使用lodash插件完成防抖节流，还是先防抖：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <!--引入lodash插件-->
    <script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js"></script>
  </head>
  <body>
    <p>请你输入内容：<input type="text"></p>
  </body>
</html>

<script>
//需要知道闭包和延迟器
let input = document.querySelector('input')
input.oninput = _.debounce(function(){
  console.log("成功啦")
},2000)
</script>

后节流：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js"></script>
  </head>
  <body>
    <h1>皮孩子被打次数:<span>0</span></h1>
    <button>打他+1</button>
  </body>
</html>
<script>
let span = document.querySelector('span');
let button = document.querySelector('button');
let count = 0;
button.onclick = _.throttle(function(){
  count++;
  span.innerHTML = count;
  console.log('3秒执行一次');
},3000);
</script>