节流
使用方式
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>