lodash debounce 不 debouncing 函数被调用多次而不是一次，react hooks react native

Question

我正在文本输入的 onChange 数组中搜索多个对象，因此我们需要一个去抖动函数来防止任何不必要的 API 调用搜索函数

问题：

去抖功能等待给定的时间，但它多次调用 API 函数而不是一次

预计：

只有一个 API 在 debounce 等待时间结束时调用

代码：

const [input, setInput] = useState('');
  const [searchResults, setSearchResults] = useState([]);

  const mockApiCall = async (result, waitingTime = 2000) => {
    await new Promise((resolve) => setTimeout(resolve, waitingTime));

    console.log('making search request', result);
    console.log('post');

    return setSearchResults((prev) => [...prev, result]);
  };

  useEffect(() => {
    console.log('pre');
     const search = _.debounce(mockApiCall, 4000);
    search(input);
    // return () => {
    //   _.debounce.cancel();
    // };
  }, [input]);

<View style={styles.container}>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
          placeholderTextColor: 'gray',
        }}
        onChangeText={(text) => setInput(text)}
        value={input}
      />
      {searchResults.map((ele) => (
        <Text>{ele}</Text>
      ))}
    </View>

零食示例：

https://snack.expo.io/@mansouriala/search-using-debounce-rn

Answer 1

当你用 debounce 包装一个函数时，你会得到一个带有内部计时器的新函数（debounce 函数）。您应该记住返回的函数，并用它来调用 api (snack).

每当调用去抖功能时，它的内部计时器都会重置，并再次开始计算超时时间（在您的情况下为 4000 毫秒）。如果您重新创建函数，之前的去抖动函数不会重置它的计时器（不会再次调用），它会调用包装函数。

const mockApiCall = useMemo(() => _.debounce(async(result, waitingTime = 2000) => {
  await new Promise((resolve) => setTimeout(resolve, waitingTime));

  console.log('making search request', result);
  console.log('post');

  return setSearchResults((prev) => [...prev, result]);
}, 4000), []);

useEffect(() => {
  console.log('pre');

  mockApiCall(input); // call the debounced function
  
  return () => {
    mockApiCall.cancel(); // cancel the debounced function
  };
}, [mockApiCall, input]);

lodash debounce 不 debouncing 函数被调用多次而不是一次，react hooks react native

lodash debouce isn't debouncing function is called many times insead of just once, react hooks react native

javascript

lodash

reactjs

debounce

react-hooks