Слушатель js перестает работать
У меня есть функция mouse up:
const handleMouseUp=useCallback((e:MouseEvent)=>{
e.preventDefault();
setIsPressed(false)
setStartX(0)
},[])
Есть функция mouse move ( я ее сократил в цели экономия времени, остальная часть просто не нужна:
const handleMouseMove = useCallback((e: MouseEvent) => {
e.preventDefault();
if (!isPressed || !graphicWidth || !classGraphic.mainCanvas || !classGraphic.mainCanvas.ctx) {
return;
}
let { thatMaxVolume, thatMinVolume } = getMaxAndMinVolume(allData, startCandle, copyHowCandleInRange);
classGraphic.DrawGraphic(
newXSliced,
classGraphic.yDown,
classGraphic.mainCanvas.dopHeight,
thatMaxPrice,
thatMinPrice,
scrollCandle,
newCandleWidth,
newCandleSpacing,
allData,
classGraphic.allData,
graphic.distance,
true,
pressedElement,
thatMaxVolume,
thatMinVolume
);
FetchingHistory(classGraphic.xLeft, classGraphic.candleWidth, classGraphic.candleSpacing, classGraphic.data, graphic, getHistoricalKlines);
}
setStartX(e.clientX);
}, [isPressed, classGraphic.candleWidth, startX, classGraphic.candleSpacing,classGraphic.data]);
Вот так я их подключаю:
useEffect(() => {
document.addEventListener('mouseup', handleMouseUp as any)
document.addEventListener('mousemove', handleMouseMove as any)
refContainer.current?.addEventListener('wheel',stretchingGraph as any,{ passive: false } as EventListenerOptions )
return () => {
document.removeEventListener('mousemove', handleMouseMove as any)
document.removeEventListener('mouseup', handleMouseUp as any)
refContainer.current?.removeEventListener('wheel',stretchingGraph as any,{ passive: false } as EventListenerOptions )
};
}, [handleMouseMove,handleMouseUp,stretchingGraph]);
Проблема заключается в том, что иногда функция handle mouse up перестает отрабатывать (console.log при поднятии мыши не работают, как будто такой функции нет), из-за чего создается эффект залипания мыши, так как состояние isPressed в значении true. Я заметил, что если я уберу функцию FetchingHistory, то все работает как надо, вот код функции FetchingHistory:
export async function FetchingHistory(newX:number, candleWidth:number, candleSpacing:number, data:string[][], graphic:IGraphic, getHistoricalKlines:LazyQueryTrigger<QueryDefinition<HistoricaKlines, BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, {}, FetchBaseQueryMeta>, "Klines", string[][], "klinesSymbolApi">>){
let allWidth=candleSpacing+candleWidth
if(newX>=0 && data.length!==0){
let howCandle=0
let howCandleNeeded=newX/(candleSpacing+candleWidth)
if(howCandleNeeded>=1000 && graphic.typeCoin!==''){
howCandle=1500
}else if( howCandleNeeded>=500){
howCandle=1000
}else{
howCandle=500
}
let ammountFetching=Math.ceil(newX/(allWidth*howCandle))
let endTimeStamp=Number(data[0][0])
let factor=GetFactorDistance(graphic.distance)
for (let i=0; i<ammountFetching; i++){
await getHistoricalKlines({symbol:graphic.coin,interval:TransformDistance(graphic.distance),type:graphic.typeCoin, end:endTimeStamp, start:endTimeStamp-howCandle*factor*60000})
endTimeStamp=endTimeStamp-howCandle*factor*60000
}
}
}
Помогите, пожалуйста, исправить проблему.