JS 节流与防抖

最新推荐文章于 2024-07-20 14:49:34 发布

Junikusa

最新推荐文章于 2024-07-20 14:49:34 发布

阅读量1.3k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Junikusa/article/details/123615077

版权

本文深入探讨了前端开发中常见的性能优化技巧——防抖和节流。通过实例展示了如何使用防抖技术确保输入框内容只在输入停止后打印，以及如何利用节流控制窗口滚动事件的执行频率，降低浏览器负担。了解并应用这些技术，能够显著提升网页性能和用户体验。

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

防抖：

用户触发事件，时间频繁，只处理最后一次事件的操作

举个例子，打印输入框输入的内容时，每次有内容都会直接打印一次，而不是直接打印最终的结果。


<body>
<input type="text">
<script>
//打印输入框的内容
let inp = document.querySelector('input');
inp.oninput = function(){
  console.log(this.value)
}
</script>
</body>

而我们要做的防抖，就是要让他做到直接打印最后的内容

函数防抖，借助setTimeout()函数，延迟执行需要执行的代码

<body>
<input type="text">
<script>
//打印输入框的内容
let inp = document.querySelector('input');
let tim = null;
inp.oninput = function(){
  if(tim !== null){
    clearTimeout(tim)
  }
 tim = setTimeout(()=>{
   console.log(this.value)
 },1000)
}
</script>
</body>

节流：

节流可以用于控制高频事件执行的次数

举个例子，在窗口滚动的时候，触发事件


<script>
//给body设置高度，出现滚动条 方便操作
document.body.style.height = '2000px';
//滚动时触发事件
window.onscroll = function(){
  console.log("hello world")
}
</script>

可以看到，从顶部滚动到底部打印了45次‘hello world’，我们可以通过节流，控制打印的频率

<script>
//给body设置高度，出现滚动条 方便操作
document.body.style.height = '2000px';
//滚动时触发事件
let flag = true;
window.onscroll = function() {
  if (flag) {
    setTimeout(() => {
      console.log("hello world")
      flag = true
    }, 500)
    flag = false
  }
}
</script>