防抖

通过设置 options.debounceWait，进入防抖模式，此时如果频繁触发 run 或者 runAsync，则会以防抖策略进行请求。

const { data, run } = useRequest(getUsername, {
  debounceWait: 300,
  manual: true,
});

如上示例代码，频繁触发 run，只会在最后一次触发结束后等待 300ms 执行。

你可以在下面 input 框中快速输入文本，体验效果

React

network/useRequest/debounce/index

import React from 'react';
import DemoContent from '@src/components/DemoContent';
import { Cell, Field, Input } from '@taroify/core';

import { useRequest } from 'taro-hooks';
import Mock from 'mockjs';

async function getEmail(search?: string): Promise<string[]> {
  console.log('debounce getEmail', search);
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(Mock.mock({ 'data|5': ['@email()'] }).data);
    }, 300);
  });
}

export default () => {
  const { data, loading, run } = useRequest(getEmail, {
    debounceWait: 1000,
    manual: true,
  });

  return (
    <DemoContent title="防抖">
      <Field align="center">
        <Input
          placeholder="Search Emails"
          onChange={(event) => run(event.detail.value)}
        />
      </Field>
      {loading ? (
        <Field>loading...</Field>
      ) : (
        <>
          {data?.map?.((v) => (
            <Cell key={v}>{v}</Cell>
          ))}
        </>
      )}
    </DemoContent>
  );
};

Vue

network/useRequest/debounce/index

<template>
  <block>
    <demo-content title="防抖">
      <nut-row>
        <nut-input
          placeholder="Search Emails"
          @update:model-value="request.run($event)"
        />
      </nut-row>
      <view v-if="request.loading">Loading...</view>
      <template v-else>
        <view v-for="item in request.data" :key="item">{{ item }}</view>
      </template>
    </demo-content>
  </block>
</template>

<script>
import { useRequest } from 'taro-hooks';

import Mock from 'mockjs';

async function getEmail(search) {
  console.log('debounce getEmail', search);
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(Mock.mock({ 'data|5': ['@email()'] }).data);
    }, 300);
  });
}

export default {
  setup() {
    const request = useRequest(getEmail, {
      debounceWait: 1000,
      manual: true,
    });

    return { request };
  },
};
</script>

API

Options

debounce 所有参数用法和效果同 lodash.debounce

参数	说明	类型	默认值
debounceWait	防抖等待时间, 单位为毫秒，设置后，进入防抖模式	number	-
debounceLeading	在延迟开始前执行调用	boolean	false
debounceTrailing	在延迟结束后执行调用	boolean	true
debounceMaxWait	允许被延迟的最大值	number	-

备注

• options.debounceWait、options.debounceLeading、options.debounceTrailing、options.debounceMaxWait 支持动态变化。
• runAsync 在真正执行时，会返回 Promise。在未被执行时，不会有任何返回。
• cancel 可以中止正在等待执行的函数。