如何让 async/await function 与 setTimeout 一起工作

Question

我有一个名为 getUser() 的异步 function 用于查询 API，我在 UI 中也有一个搜索字段（来自语义 UI React 的组件），它将查询基于数据的 ZDB974238714CA8DE634A7CED 的 ZDB974238714CA8DE634A7CED 值。下面的代码：

<>
  <Form.Dropdown
    search
    selection
    clearable
    fluid
    multiple
    width={width}
    name={name}
    placeholder="Start typing name to search"
    onSearchChange={
      async (event, data) => {
        const query = data.searchQuery;
        const response = await getUser(query);
        
       // other code
  />
</>

目前，如果我在搜索字段中输入'test'，它将查询API四次（带有't'，'te'，'tes'，'test'），我想实现的只是调用getUser（ ) function 如果用户完成输入（例如，如果用户在 1 秒内没有输入任何内容，则开始查询 API）。 我在 Semantic UI React 的 [documentation][1] 中找到了一些示例（请参阅文档中的完整代码片段）：

 const timeoutRef = React.useRef()


const handleSearchChange = React.useCallback((e, data) => {
    clearTimeout(timeoutRef.current)
    dispatch({ type: 'START_SEARCH', query: data.value })

    timeoutRef.current = setTimeout(() => {
       if (data.value.length === 0) {
          dispatch({ type: 'CLEAN_QUERY' })
          return
    }

    const re = new RegExp(_.escapeRegExp(data.value), 'i')
    const isMatch = (result) => re.test(result.title)

    dispatch({
       type: 'FINISH_SEARCH',
       results: _.filter(source, isMatch),
      })
    }, 3000)

  }, [])

  React.useEffect(() => {
    return () => {
      clearTimeout(timeoutRef.current)
    }
  }, [])

我尝试以相同的方式实现，但似乎我不能在 setTimeout 内执行 await （await 应该只适用于异步函数）。 我应该如何实现这一目标？ 谢谢！

Answer 1

setTimeout接受异步函数。 您可以通过匿名异步 function 内联，它会尊重await 。

 const delay = ms => new Promise(res => setTimeout(() => res(), ms)); const t0 = performance.now(); setTimeout(async () => { await delay(1000); const t1 = performance.now(); console.log(`total wait: ${t1 - t0}`); }, 1000);