延迟建议时间 Material-UI Autocomplete 组件

Question

任何人都知道如何在给出建议之前延迟时间？

一旦我写了第一封信，它就给了我建议，我想推迟一下，我通读了文档但找不到它，也许不可能？

Answer 1

您可以使用 lodash 的 debounce() 函数（基本上是一个 window.setTimeout 技巧来限制重复调用）：

import _ from 'lodash';

...

doSearch(text) {
   // Your normal handler here
}

...

// Delay autocomplete until 500 ms after use stops typing
<AutoComplete
  onUpdateInput={_.debounce((value) => doSearch(value), 500)}
  ...
/>

Answer 2

我的项目中有一个来自 Antd 包的 AutoComplete 的示例：

const { AutoComplete } = antd

const WAIT_INTERVAL = 1000
let timerID

class Test extends React.Component {

    handleSearch = (query) => {
        clearTimeout(timerID)

        timerID = setTimeout(() => {
            console.log('some action after delay')
        }, WAIT_INTERVAL)
    }

    render(){
        return (
            <AutoComplete
                ...
                onSearch={handleSearch}
            />
        )
    }
}

Answer 3

传统的方法是在用户打字时使用debounce或throttle延迟函数调用。它们之间的延迟行为略有不同，请参阅此处了解更多信息。对于这个答案，我将使用debouncefrom lodash.

另外请不要复制最受好评的答案。这是错误的并且使用了不好的做法：

• 它导入了整个 lodash 包，其中包含大量您可能不需要的其他方法，并且会增加您的最终包大小。在正确的方式来做到这一点是使用进口的语法来代替：

import debounce from 'lodash/debounce

• 它将结果debounce(handleSearch)直接传递给onUpdateInput道具。debounce是一个高阶函数，它是一个函数工厂，它创建了另一个可以延迟的函数：

import debounce from 'lodash/debounce

这意味着debounce(handleSearch)每次重新渲染组件时都会创建一个带有自己的延迟计时器的新函数，也就是每次用户在文本字段中键入时。这将产生意想不到的副作用，甚至使组件根本无法工作。

解决方案是useCallback在组件重新渲染时使用来返回相同的延迟函数实例。以下是最小的工作示例：

const handleSearch = () => { // ... }
const handleSearchDelayed = debounce(handleSearch, 50);

handleSearchDelayed();
handleSearchDelayed();
handleSearchDelayed();

// handleSearchDelayed is called 3 times but handleSearch will only be called 1 time
// 50ms later

现场演示