前言

防抖节流在计算机科学中，防抖（Debouncing）和节流（Throttling）是两种常用的性能优化技术，用于控制事件触发的频率，以提高用户体验并减少资源的浪费，提升运行性能。

防抖是 单位时间内频繁触发事件，只触发最后一次（例如: 搜索框，王者荣耀英雄回城）；
节流是 单位时间内频繁触发事件，只触发一次（例如: 鼠标移动，穿越火线中散弹枪）

代码如下：

此时有一个输入框关键词的搜索事件'searchWord' , 用户根据输入的关键词筛选搜索，为了提高用户搜索体验，优化页面加载性能。因此可以用到防抖或节流。

    data() {
      return {
        queryParams:{
         page:1                       //第一页
        },
         keyWord:null,                //关键词
      }
    },
    // 搜索框事件
    searchWord() {
       this.queryParams.page = 1    //从第一页开始
       this.getEmployeeList()      // 调用接口，发送请求
    },

防抖优化：

    data() {
      return {
        queryParams:{
         page:1                          //第一页
        },
         keyWord:null,                   //关键词
      } 
    },
    // 搜索框事件
    searchWord() {
      clearTimeout(this.timer)          // 清除上一次的定时器
      this.timer = setTimeout(() => {   // 设置开启定时器，间隔事件500毫秒
        this.queryParams.page = 1       //从第一页开始
        this.getEmployeeList()          // 调用接口，发送请求
      }, 500)
    },

节流优化：

    data() {
      return {
        queryParams:{
         page:1                       //第一页
        },
         keyWord:null,               //关键词
         number: true                //节流赋值的变量
      }
    },

    // 搜索框事件
    searchWord() {
      if (this.number) {               // 判断如果为true，则执行下方代码
        this.number = false            // 设置值为false，只有当500毫秒后才会变为true
        setTimeout(() => {             // 设置开启定时器，间隔事件500毫秒
          this.queryParams.page = 1    //从第一页开始
          this.getEmployeeList()      // 调用接口，发送请求
          this.number = true          // 只有500毫秒以后，才将默认值设置为true
        }, 500)
      }

结尾

防抖和节流都是为了控制事件触发的频率，提高性能和用户体验。防抖适用于需要等待一段时间并确保在该时间段内没有再次触发事件的场景，而节流适用于在一定时间间隔内限制事件触发的场景。具体使用哪种技术取决于具体环境。