Слушатель 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
        }
      }
}

Помогите, пожалуйста, исправить проблему.


Ответы (0 шт):