React hooks - предотвращение слишком быстрого обновления useEffect - PullRequest
Новая
       9

React hooks - предотвращение слишком быстрого обновления useEffect

0 голосов
/ 27 февраля 2020

У меня есть компонент DatePicker, который я делаю. Есть три «циферблата» для дней, месяцев и лет, которые перемещаются путем перетаскивания мышью в столбцах div. Он отлично работает, за исключением того, что он обновляется очень быстро и все движется слишком быстро. Как сделать так, чтобы он обновлялся только с установленными интервалами?

Мой код useEffect: 

    useEffect(() => {
            if (mouseState.mouseIsDown && mouseState.dateField === 'year') {
                getYear();
            } else if (date) {
                setNewStartDate();
            }

            if (mouseState.mouseIsDown && mouseState.dateField === 'month') {
                getMonth();
            } else if (date) {
                setNewStartDate();
            }

            if (mouseState.mouseIsDown && mouseState.dateField === 'day') {
                getDay();
            } else if (date) {
                setNewStartDate();
            }
        },
        [ mouseState.mouseIsDown, mouseState.dateField, endPositionYYear, endPositionYMonth, endPositionYDay ]
    );

Моя функция getYear выглядит следующим образом: 

    const getYear = () => {
            getPositions('year');
            if (startDate.getFullYear() >= 1911 || (endPositionYYear < 0 && startDate.getFullYear() === 1911)) {
                if (endPositionYYear > prevEndPositionYYear) {
                    setMyDate(new Date(year - 1, month, day));
                } else {
                    setMyDate(new Date(year + 1, month, day));
                }
            } else if (startDate.getFullYear() < 1911 && endPositionYYear > 0) {
                setMyDate(new Date(year + Math.round(endPositionYYear / 10), month, day));
            }
        };

Если я установите Timeouts во время функции getYear, хук useEffect с получением новых координат положения Y от mouseState.mouseIsDown, который хранит координаты Y мыши, когда левая кнопка мыши нажата, до истечения времени ожидания, и вызов функции будет отменен по последнему звонку getYear? Я думаю?

Есть ли способ убедиться, что getYear будет вызываться только каждые 500 мс, скажем?

1 Ответ

1 голос
/ 28 февраля 2020

Вы можете улучшить свои потребности. 

// 0 is no limit
function useDebounce(callFn, callCount = 0 , time = 1000){
  const timeout = useRef(); // to clear interval in anywhere
  const counter = useRef(0);


  function clear(){
    timeout.current && clearInterval(timeout.current);
    counter.current = 0;
  }

  useEffect(() => {
    timeout.current = setInterval(() => {
      callFn(counter.current++); // pass call-count, it may be useful
      if(callCount > 0 && counter.current == callCount){
        timeout.current && clearInterval(timeout.current);
      }
    }, time);
    return clear
  }, []);

  return useCallback(() => clear(), []);
}
...