在 Vue 中使用节流限制一个接口的请求频率

在 Vue 中使用节流来限制一个接口的请求频率可以使用 lodash 库中的 _.throttle 函数。首先需要安装 lodash，然后在组件中引入。

例如，如果你有一个名为 getData 的方法，你想限制它每隔 500 毫秒才能调用一次，你可以这样做:

<template>
  <div>
    <button @click="throttledGetData">Get Data</button>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  methods: {
    getData() {
      // 此处为接口请求
    },
    throttledGetData: _.throttle(this.getData, 500)
  }
}
</script>

这样，当用户点击按钮时触发的 `throttledGetData` 方法会被限制在每隔 500 毫秒调用一次。

注意：
- throttle函数默认情况下立即执行第一次,如果要等待首次执行可以在第三个参数设置{leading: false}
- 如果需要最后一次执行的话，可以在第三个参数设置{trailing: true}

相关问题

antd vue 创建一个节流下拉框

您可以使用 `debounce` 或 `throttle` 函数来创建一个节流下拉框。这里提供一个使用 `throttle` 的示例：

<template>
  <div>
    <a-select
      mode="multiple"
      :placeholder="placeholder"
      @search="handleSearch"
    >
      <a-select-option
        v-for="option in options"
        :key="option.value"
        :value="option.value"
      >
        {{ option.label }}
      </a-select-option>
    </a-select>
  </div>
</template>

<script>
import { throttle } from 'lodash-es';
import { getOptions } from '@/api'; // 获取选项列表的 API

export default {
  data() {
    return {
      options: [],
      placeholder: '请输入关键字进行搜索',
    };
  },
  methods: {
    handleSearch: throttle(async function(value) {
      // 调用接口获取选项列表，这里使用 async/await 写法
      const res = await getOptions({ keyword: value });
      if (res.code === 0) {
        this.options = res.data;
      }
    }, 500), // 500ms 内只会执行一次 handleSearch 函数
  },
};
</script>

这个示例使用了 `throttle` 函数来限制 `handleSearch` 函数的调用频率，当用户输入过快时，API 请求只会在间隔不少于 500ms 时才会发送，以减少不必要的请求。

antd vue 创建一个节流 搜索下拉框

您可以使用 `debounce` 或 `throttle` 函数来创建一个节流搜索下拉框。这里提供一个使用 `debounce` 的示例：

<template>
  <div>
    <a-select
      v-model="value"
      :placeholder="placeholder"
      :dropdown-style="{ maxHeight: '300px' }"
      @search="handleSearch"
    >
      <a-select-option
        v-for="option in options"
        :key="option.value"
        :value="option.value"
      >
        {{ option.label }}
      </a-select-option>
    </a-select>
  </div>
</template>

<script>
import { debounce } from 'lodash-es';
import { getOptions } from '@/api'; // 获取选项列表的 API

export default {
  data() {
    return {
      options: [],
      value: undefined,
      placeholder: '请输入关键字进行搜索',
    };
  },
  methods: {
    handleSearch: debounce(async function(value) {
      // 调用接口获取选项列表，这里使用 async/await 写法
      const res = await getOptions({ keyword: value });
      if (res.code === 0) {
        this.options = res.data;
      }
    }, 500), // 用户输入停止 500ms 后才会执行 handleSearch 函数
  },
};
</script>

这个示例使用了 `debounce` 函数来限制 `handleSearch` 函数的调用频率，当用户输入时，API 请求只会在输入停止不少于 500ms 时才会发送，以减少不必要的请求。