防止由于搜索栏上的去抖动而导致延迟

Question

我有一个搜索栏，我在其中获取输入的文本并进行 API 调用。为了限制 API 调用的数量，我使用了 debounce。我想在搜索栏中输入内容时显示加载器，但由于去抖动，该操作也被延迟。我试图在下面的代码中复制行为-

import React, { useState } from "react";
import "./style.css";
import { debounce } from "lodash";

export default function App() {
  const [loading, setLoading] = useState(false);

  const callAPI = () => {
    setLoading(true);


    // Post this will be the logic to call API
    console.log('API is called')
  };
  const inputChangeHandler = event => {
    const text = event.target.value;
    if (text.length === 0) {
      setLoading(false);
    } else {
      callAPI();
    }
  };
  const debouncedChangeHandler = debounce(inputChangeHandler, 1000);

  return (
    <div>
      <input type="text" onChange={debouncedChangeHandler} />
      {loading && <p>Loading...</p>}
    </div>
  );
}

Here是链接

我想在搜索栏中输入内容时显示加载程序，但我也想消除 API 调用的调用。

Answer 1

在创建debounced 函数时使用{ leading: true } 选项：

const debouncedChangeHandler = debounce(inputChangeHandler, 1000, { leading: true });

这将导致第一次调用（前沿立即调用该函数，并消除其余部分的抖动。

例子：

const { useState } = React;
const { debounce } = _;

function App() {
  const [loading, setLoading] = useState(false);

  const callAPI = () => {
    setLoading(true);

    // Post this will be the logic to call API
    console.log("API is called");
  };
  const inputChangeHandler = event => {
    const text = event.target.value;
    if (text.length === 0) {
      setLoading(false);
    } else {
      callAPI();
    }
  };
  
  const debouncedChangeHandler = debounce(inputChangeHandler, 1000, { leading: true });

  return (
    <div>
      <input type="text" onChange={debouncedChangeHandler} />
      {loading && <p>Loading...</p>}
    </div>
  );
}

ReactDOM.render(
  <App />,
  root
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

或者你可以只对callAPI函数进行去抖动：

const { useState } = React;
const { debounce } = _;

function App() {
  const [loading, setLoading] = useState(false);

  const callAPI = () => {
    // Post this will be the logic to call API
    console.log("API is called");
  };
  
  const debouncedCallAPI = debounce(callAPI, 1000);
  
  const inputChangeHandler = event => {
    const text = event.target.value;
    if (text.length === 0) {
      setLoading(false);
    } else {
      setLoading(true);
      debouncedCallAPI();
    }
  };
 

  return (
    <div>
      <input type="text" onChange={inputChangeHandler} />
      {loading && <p>Loading...</p>}
    </div>
  );
}

ReactDOM.render(
  <App />,
  root
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>