onMouseDown not triggering useEffect

Question

如果用户按下按钮，我试图通过每500ms调用一个函数来实现一个可拖动的液位计。然而，由于某种原因，useEffect()只有在按钮释放时才会触发，而我没有得到所需的效果。

以下是代码的相关部分：

import React, { useContext, useEffect, useCallback, useState, useRef } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonToggle, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react';
import useLongPress from './useLongPress';
import './LightController.css';
import { AppContext } from './../AppContextProvider';
export interface InterfaceLamp {
id?: number,
brightness: number,
turnedOn: boolean,
}
const LightController: React.FC<InterfaceLamp> = (props) => {
const { state, dispatch } = useContext(AppContext);
const [isMouseDown, setMouseDown] = useState(false);
const [interval, confInterval] = useState();

useEffect(() => {
if (isMouseDown) {
let timeOut = setInterval(getPercentage, 500);
confInterval(timeOut);
} else {
clearInterval(interval);
}
return () => {
clearInterval(interval);
};
}, [isMouseDown]);
const getPercentage = () => {
console.log('percentage')
}
return (
<div className="c-light">
<p>brightness</p>
<div className="c-light__meter__wrapper"
onMouseDown={(e) => setMouseDown(true)}
onMouseUp={(e) => setMouseDown(false)}
>
<div className="c-light__meter">
</div>
<div className="c-light__meter__value">
{props.brightness}
</div>
</div>
</div>
);
};
export default LightController;

有什么想法吗？

感谢

Answer 1

使用Debounce.ts

import { useState, useEffect } from 'react';
function useDebounce<T>(
initialValue: T,
time: number
): [T, T, React.Dispatch<T>] {
const [value, setValue] = useState<T>(initialValue);
const [debouncedValue, setDebouncedValue] = useState<T>(initialValue);
useEffect(() => {
const debounce = setTimeout(() => {
setDebouncedValue(value);
}, time);
return () => {
clearTimeout(debounce);
};
}, [value, time]);
return [debouncedValue, value, setValue];
}

LightController.ts

const [debouncedMouseDown, isMouseDown, setMouseDown] = useDebounce<boolean>(false, 500);
useEffect(() => {
// do something
}, [debouncedMouseDown])
// rest omitted

Nick Scialli 提出的优雅方法

另请参阅使用lodash去抖动