Vue防抖节流

使用场景：

1. 多次操作只执行第一次操作。

    -- 可以用于用户点击按钮事件防抖操作。

2.多次操作只执行最后一次操作。

    -- 可以搜索输入框，输入多个字符进行搜索，当输入停止之后进行搜索操作者。

使用步骤：

1.vue项目中src\utils\utils.js定义全局防抖函数：

 /**
   * 防抖
   * @param {function} fn 执行函数
   * @param {number} wait 等待时间，毫秒
   * @param {boolean} immediate 是否立即执行
   */
  debounce: function (fn, wait, immediate) {
    let timeout; // 局部全局变量
    return function (...args) {
      let context = this;
      if (timeout) clearTimeout(timeout); // 清除计时器，但是timeout本身还在，只是不会在执行

      if (immediate) { // 总是执行第一次操作
        let callNow = !timeout; // 第一次为true
        // 多次操作，timeout初始化，多次触发只有当wait等待时间结束timeout才为空
        timeout = setTimeout(function () {
          timeout = null;
        }, wait);
        // 第一次为true, 执行
        if (callNow) fn.apply(context, args);
      } else { // 总是执行最后一次操作
        timeout = setTimeout(function () {
          fn.apply(context, args);
        }, wait);
      }
    };
  },

2. 组件中使用debounce防抖函数：

（1）多次操作只执行第一次操作:

<template>
  <div class="entry-list" @click="entryClick>
    点击跳转页面时，避免多次点击之后执行多次跳转页面
  </div>
</template>

<script>
import utils from "./utils/utils";
const debounce = utils.debounce;
export default {
  name: "EntryList",
  data() {
    return {};
  },
  methods: {
    /**
     * 多次点击事件，只执行第一次点击事件
     */
    entryClick: debounce(
      function () {
        console.log("多次点击事件，只执行第一次点击事件");
      },
      500,
      true
    ),
  },
};
</script>

（1）多次操作只执行最后一次操作：

<template>
  <div ref="container" class="private-opportunity-list">
    <van-search
      v-model="searchValue"
      shape="round"
      placeholder="请输入机会/项目名称"
      @input="search"
    />
  </div>
</template>

<script>
import utils from "./utils/utils";
const debounce = utils.debounce;

export default {
  name: "FilterProjectList",
  data() {
    return {
      total: 0,
      searchValue: "", // 根据客户简称检索条件
    };
  },
  components: {
    SearchProjectListItem,
  },
  methods: {
    search: debounce(function () {
      // 输入多个字符，字符变化事件，只执行最后一次搜索
      this.doSearch(this.searchValue);
    }, 500),
  },
};
</script>

效果图：