多次调用时反应取消回调

Question

我正在尝试更新一些代码。您可以更改日期，当您更改日期时，将调用 useEffect()。问题是只要第一个承诺仍在加载，您就可以单击新日期。我想取消第一个做出的承诺，只接受最后一个点击的承诺。例如 startDate = 01-04-2022 然后 select 02-04-2022、03-04-2022 等

const getData = useCallback((): void => {
    const selectedDate = dateParam ? new Date(dateParam) : new Date();

    myApiCall(selectedDate)
        .then((result: //variable here) => {
            //do stuff with result and set data
            setData(result);
        })
        .catch((err) => {
           //if error occurs
            console.log('Error: ', err);
        })
        .finally(() => {
            //set loading to false so no memory leak can occur
            setLoading(false);
        });
}, []);

useEffect(() => {
    setLoading(true);
    getData();

    const interval = setInterval(() => {
        getData();
    }, 30000);

    return () => clearInterval(interval);
}, [getData]);

我被代码困住了，但我希望有人能帮忙。在此先感谢您的反馈等。

Answer 1

来自 loadash 的

debounce 应该可以帮助您。

import debounce from 'lodash.debounce';

const yourFunction = () => {
    const selectedDate = dateParam ? new Date(dateParam) : new Date();

    myApiCall(selectedDate)
        .then((result: //variable here) => {
            //do stuff with result and set data
            setData(result);
        })
        .catch((err) => {
           //if error occurs
            console.log('Error: ', err);
        })
        .finally(() => {
            //set loading to false so no memory leak can occur
            setLoading(false);
        });
}

const getData = useCallback((): void => {
   debounce(yourFunction, 300) // value 300 is in ms - its just treshold you can change it to any value you want
}, []);

现在，当用户多次点击更改日期然后他停止 3 秒（300 毫秒）时，只会触发最近的点击

多次调用时反应取消回调

React cancel callback when calling it multiple times

callback

reactjs

react-hooks

use-effect