防抖和节流

防抖和节流是两种优化高频率触发事件的常用技术，常用于处理如窗口滚动、输入框输入、按钮点击等频繁触发的场景，以提高性能和用户体验。

防抖

防抖是指在一定时间内，只有最后一次触发事件才会执行相应的函数。如果在这个时间间隔内又触发了该事件，则重新计时。通俗来讲，就是你不断触发事件，只要不停止触发，就永远不会执行，直到你停止触发一段时间后，才会执行一次。

<template>
    <div>
      <input v-model="keyword" @input="debouncedSearch" placeholder="请输入搜索关键词">
      <p>搜索关键词: {{ keyword }}</p>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        keyword: ''
      };
    },
    methods: {
      // 模拟搜索方法
      search() {
        console.log(`正在搜索: ${this.keyword}`);
      },
      // 防抖函数
      debounce(func, delay) {
        let timer = null;
        return function() {
          const context = this;
          const args = arguments;
          if (timer) {
            clearTimeout(timer);
          }
          timer = setTimeout(() => {
            func.apply(context, args);
          }, delay);
        };
      }
    },
    computed: {
      // 计算属性，返回防抖后的搜索函数
      debouncedSearch() {
        return this.debounce(this.search, 300);
      }
    }
  };
  </script>

这里简单解释下，首先是一个input输入框，监听元素的输入事件，当在输入内容的时候会触发debouncedSearch。search方法用来模拟搜索接口获取数据。然后封装了防抖方法，该方法传入两个参数，第一个参数传入一个方法，第二个参数传入时间。

效果

如果不使用防抖监听输入事件的话，则每输入一次就会调用一次搜索接口很浪费性能 

  computed: {
      // 计算属性，返回防抖后的搜索函数
      debouncedSearch() {
        return this.search();
      }
    }

节流 

节流是指在一定时间内，只执行一次函数。即使在这个时间间隔内多次触发事件，也只会在规定时间内执行一次。可以理解为在一段时间内，函数有固定的执行频率。

<template>
    <div>
         <button @click="throttledScroll">提交</button>
    </div>
  </template>
  
  <script>
  export default {
    data(){
            return{
                num:0
            }
        },
    methods: {
     
       //模拟提交接口
     Submit(){
           console.log('提交接口触发次数',this.num++);
     },
      // 节流函数
      throttle(func, delay) {
        let timer = null;
        return function() {
          const context = this;
          const args = arguments;
          if (!timer) {
            func.apply(context, args);
            timer = setTimeout(() => {
              timer = null;
            }, delay);
          }
        };
      }
    },
    computed: {
        //1.5秒内点击多少次都会只执行一次 Submit方法
      throttledScroll() {
        return this.throttle(this.Submit, 1500);
      }
    }
  };
  </script>

这里主要就是封装了节流方法。

运行效果，在1.5秒内多次点击只打印了一次

如果不使用节流，则点击一次就会打印一次 

  computed: {
      //不使用节流
      throttledScroll() {
       return this.Submit
      }
    }

针对于会发起请求的按钮，也可以通过加loading动画来避免重复点击的问题。并且如果对于接口提交比较慢的情况，加上loading动画也能够优化下用户体验。 

end

如有误欢迎指正