Skip to content

节流

使用方式

typescript
import  useRequest  from '@pluve/use-request-vue';

const { data, run } = useRequest(
  (keyword) => fetch(`/api/search?q=${keyword}`).then(res => res.json()),
  {
    manual: true,
    throttleInterval: 1000, // 节流等待时间(毫秒)
  }
);

// 秒内多次调用,但只会发送一次请run('vue');
setTimeout(() => run('vue'), 200); // 被节setTimeout(() => run('vue'), 400); // 被节```

## 配置
### `throttleInterval`
- 类型:`number`
- 必填:是
- 说明  - 节流等待时间(毫秒)
  - 在指定时间内,只会执行一次请

### 基本使用

```vue
<template>
  <div>
    <input v-model="keyword" @input="handleSearch" placeholder="搜索..." />
    <div v-if="loading">搜索..</div>
    <div v-else>
      <div v-for="item in data?.list" :key="item.id">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import  useRequest  from '@pluve/use-request-vue';

const keyword = ref('');

const { data, loading, run } = useRequest(
  (kw) => fetch(`/api/search?q=${kw}`).then(res => res.json()),
  {
    manual: true,
    throttleInterval: 1000,
  }
);

const handleSearch = () => {
  if (!keyword.value.trim()) return;
  run(keyword.value);
};
</script>