什么是防抖和节流?

木木夕0714

于 2021-05-23 18:07:05 发布

阅读量110

点赞数

文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/qq_50384924/article/details/117163965

版权

本文详细介绍了JavaScript中两种重要的性能优化技术——节流(throttle)和防抖(debounce)。节流用于限制函数在一定时间内的执行次数，常用于滚动条事件处理；防抖则确保函数在特定时间间隔后才执行，适用于输入框实时搜索等场景。通过实例代码展示了如何实现这两种技术，以提高代码执行效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、节流(throttle)
高频事件触发,但是在n秒内只会执行一次,如果这个单位时间内触发多次函数,只有一次生效
使用场景:频繁触发,onscroll滚动条

过程:
每次触发事件时都取消之前的延时调用方法

用户拖动滚动条可以用 节流 方式实现
mounted() {
   window.addEventListener('scroll', this.scrollToTop)
},
methods: {
  scrollToTop() {
    clearTimeout(this.tiemID);
    this.tiemID = setTimeout(() => {
      console.log('执行节流函数');
    }, 1000);
  }
}

二、防抖(debounce)
触发高频函数事件后,n秒内函数只能执行一次,如果在n秒内这个事件再次被触发的话,那么会重新计算时间
使用场景:input框,用户在不断输入值时,用防抖来节约请求资源

过程:
每次触发事件时都取消之前的延时调用方法

<template>
  <div>
    <input type="text" @keyup="debounce" />
  </div>
</template>
<script>
//定义 timer
let timer;
export default {
  methods: {
    debounce: function() {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        console.log("防抖...");
        timer = undefined;
      }, 2000);
    }
  }
};
</script>