diff --git a/src/components/popups/popupBox/component.tsx b/src/components/popups/popupBox/component.tsx index 7b9984da..bf3bc888 100644 --- a/src/components/popups/popupBox/component.tsx +++ b/src/components/popups/popupBox/component.tsx @@ -8,6 +8,7 @@ import { getIframeDoc } from "../../../utils/reader/docUtil"; import PopupAssist from "../popupAssist"; import { isElectron } from "react-device-detect"; import { ConfigService } from "../../../assets/lib/kookit-extra-browser.min"; +import { throttle } from "../../../utils/common"; const POPUP_SIZE_KEY = "popupBoxSize"; const DEFAULT_WIDTH = 500; @@ -79,7 +80,8 @@ class PopupBox extends React.Component { }); this.setState({ isShowUrl }); } - document.addEventListener("mousemove", this.handleResizeMove); + const throttledMouseMove = throttle(this.handleResizeMove, 100); + document.addEventListener("mousemove", throttledMouseMove); document.addEventListener("mouseup", this.handleResizeEnd); } diff --git a/src/pages/reader/component.tsx b/src/pages/reader/component.tsx index 32625755..ea70b960 100644 --- a/src/pages/reader/component.tsx +++ b/src/pages/reader/component.tsx @@ -30,6 +30,7 @@ import { READING_PANEL_TOGGLE_EVENT, MOUSE_POSITION_EVENT, } from "../../utils/reader/mouseEvent"; +import { throttle } from "../../utils/common"; declare var window: any; let lock = false; //prevent from clicking too fasts let throttleTime = 200; @@ -141,12 +142,14 @@ class Reader extends React.Component { ConfigService.setReaderConfig("isFinishWebReading", "yes"); } }); - window.addEventListener("mousemove", () => { + const handleMouseMove = () => { isMouseMoving = true; setTimeout(() => { isMouseMoving = false; }, 100); - }); + }; + const throttledMouseMove = throttle(handleMouseMove, 100); + window.addEventListener("mousemove", throttledMouseMove); window.addEventListener("mousemove", this.handleEdgeProximity); window.addEventListener(MOUSE_POSITION_EVENT, this.handleEdgeProximity); window.addEventListener( @@ -208,10 +211,7 @@ class Reader extends React.Component { componentWillUnmount() { window.removeEventListener("mousemove", this.handleEdgeProximity); - window.removeEventListener( - MOUSE_POSITION_EVENT, - this.handleEdgeProximity - ); + window.removeEventListener(MOUSE_POSITION_EVENT, this.handleEdgeProximity); window.removeEventListener( READING_PANEL_TOGGLE_EVENT, this.handleReadingPanelToggle diff --git a/src/utils/reader/mouseEvent.ts b/src/utils/reader/mouseEvent.ts index d533da7d..aab8fcdb 100644 --- a/src/utils/reader/mouseEvent.ts +++ b/src/utils/reader/mouseEvent.ts @@ -1,7 +1,12 @@ import { ConfigService } from "../../assets/lib/kookit-extra-browser.min"; import { isElectron } from "react-device-detect"; import { getIframeDoc, getIframeWin } from "./docUtil"; -import { handleExitFullScreen, handleFullScreen, sleep } from "../common"; +import { + handleExitFullScreen, + handleFullScreen, + sleep, + throttle, +} from "../common"; import Hammer from "hammerjs"; import TTSUtil from "./ttsUtil"; import { @@ -454,7 +459,7 @@ export const bindHtmlEvent = ( { passive: false } ); - doc.addEventListener("mousemove", (event: any) => { + const throttledMouseMove = throttle((event: any) => { window.dispatchEvent( new CustomEvent(MOUSE_POSITION_EVENT, { detail: { @@ -463,7 +468,9 @@ export const bindHtmlEvent = ( }, }) ); - }); + }, 100); + + doc.addEventListener("mousemove", throttledMouseMove); }; export const htmlMouseEvent = ( rendition: any,