From 6cdcbba1f5df23291f1c0e2796c78165f07fa5bc Mon Sep 17 00:00:00 2001 From: wxxFE <2022095028@qq.com> Date: Sat, 24 Aug 2024 02:12:15 +0800 Subject: [PATCH 1/7] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DscrollIntoView?= =?UTF-8?q?=E7=9A=84=E5=8F=82=E6=95=B0behavior=E8=AE=BE=E7=BD=AE=E4=B8=BAs?= =?UTF-8?q?mooth=E6=97=B6=E5=BC=95=E5=AF=BC=E9=9D=A2=E6=9D=BF=E5=AE=9A?= =?UTF-8?q?=E4=BD=8D=E5=BC=82=E5=B8=B8=E7=9A=84=E9=97=AE=E9=A2=98=20#50509?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/examples/scrollIntoView.tsx | 4 ++-- src/hooks/useTarget.ts | 9 +++++++-- src/util.ts | 13 +++++++++++++ 3 files changed, 22 insertions(+), 4 deletions(-) diff --git a/docs/examples/scrollIntoView.tsx b/docs/examples/scrollIntoView.tsx index 5b73764..fd40ee9 100644 --- a/docs/examples/scrollIntoView.tsx +++ b/docs/examples/scrollIntoView.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from 'react'; +import React, {useRef, useState} from 'react'; import Tour from '../../src/index'; import './basic.less'; @@ -65,7 +65,7 @@ const App = () => { ), target: () => updateBtnRef.current, scrollIntoViewOptions: { - block: 'start' + block: 'start', behavior:'smooth' } }, { diff --git a/src/hooks/useTarget.ts b/src/hooks/useTarget.ts index 432c3b2..18ed6e4 100644 --- a/src/hooks/useTarget.ts +++ b/src/hooks/useTarget.ts @@ -2,7 +2,7 @@ import useEvent from 'rc-util/lib/hooks/useEvent'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import { useMemo, useState } from 'react'; import type { TourStepInfo } from '..'; -import { isInViewPort } from '../util'; +import { isInViewPort,debounce } from '../util'; export interface Gap { offset?: number | [number, number]; @@ -44,8 +44,8 @@ export default function useTarget( // Exist target element. We should scroll and get target position if (!isInViewPort(targetElement) && open) { targetElement.scrollIntoView(scrollIntoViewOptions); + return; } - const { left, top, width, height } = targetElement.getBoundingClientRect(); const nextPosInfo: PosInfo = { left, top, width, height, radius: 0 }; @@ -62,6 +62,8 @@ export default function useTarget( } }); + const debounceUpdatePos = debounce(updatePos, 16) + const getGapOffset = (index: number) => (Array.isArray(gap?.offset) ? gap?.offset[index] : gap?.offset) ?? 6; @@ -69,8 +71,11 @@ export default function useTarget( updatePos(); // update when window resize window.addEventListener('resize', updatePos); + // update when window scroll stop + window.addEventListener('scroll',debounceUpdatePos) return () => { window.removeEventListener('resize', updatePos); + window.removeEventListener('scroll', debounceUpdatePos); }; }, [targetElement, open, updatePos]); diff --git a/src/util.ts b/src/util.ts index cc95084..88d243b 100644 --- a/src/util.ts +++ b/src/util.ts @@ -18,3 +18,16 @@ export function getPlacement( stepPlacement ?? placement ?? (targetElement === null ? 'center' : 'bottom') ); } + +export function debounce any>(func: T, wait: number): T { + let timeoutId: ReturnType; + + const debouncedFunc = (...args: Parameters): void => { + clearTimeout(timeoutId); + timeoutId = setTimeout(() => { + func(...args); + }, wait); + }; + + return debouncedFunc as T; +} \ No newline at end of file From 2dcb72e09855ecbc7ffea1cd9ab7dd2e604b6f79 Mon Sep 17 00:00:00 2001 From: wxxFE <2022095028@qq.com> Date: Sat, 24 Aug 2024 02:34:43 +0800 Subject: [PATCH 2/7] demo: format adjustment --- docs/examples/scrollIntoView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/examples/scrollIntoView.tsx b/docs/examples/scrollIntoView.tsx index fd40ee9..463783e 100644 --- a/docs/examples/scrollIntoView.tsx +++ b/docs/examples/scrollIntoView.tsx @@ -1,4 +1,4 @@ -import React, {useRef, useState} from 'react'; +import React, { useRef, useState } from 'react'; import Tour from '../../src/index'; import './basic.less'; From 092eb9bcd5feffaf903d46947699e4c1e061e792 Mon Sep 17 00:00:00 2001 From: wxxFE <2022095028@qq.com> Date: Sat, 24 Aug 2024 12:19:15 +0800 Subject: [PATCH 3/7] fix: the stabilization time is set too short --- docs/examples/scrollIntoView.tsx | 2 +- src/hooks/useTarget.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/examples/scrollIntoView.tsx b/docs/examples/scrollIntoView.tsx index 463783e..77a7892 100644 --- a/docs/examples/scrollIntoView.tsx +++ b/docs/examples/scrollIntoView.tsx @@ -32,7 +32,7 @@ const App = () => { > Create -
+
diff --git a/src/hooks/useTarget.ts b/src/hooks/useTarget.ts index 18ed6e4..3d2ae4e 100644 --- a/src/hooks/useTarget.ts +++ b/src/hooks/useTarget.ts @@ -62,7 +62,7 @@ export default function useTarget( } }); - const debounceUpdatePos = debounce(updatePos, 16) + const debounceUpdatePos = debounce(updatePos, 50) const getGapOffset = (index: number) => (Array.isArray(gap?.offset) ? gap?.offset[index] : gap?.offset) ?? 6; From af8296600a43c4b838c6a7282930778bfdf986b7 Mon Sep 17 00:00:00 2001 From: wxxFE <2022095028@qq.com> Date: Sat, 24 Aug 2024 13:38:44 +0800 Subject: [PATCH 4/7] fix: optimized scrolling performance --- src/hooks/useTarget.ts | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/hooks/useTarget.ts b/src/hooks/useTarget.ts index 3d2ae4e..4107d7f 100644 --- a/src/hooks/useTarget.ts +++ b/src/hooks/useTarget.ts @@ -62,7 +62,19 @@ export default function useTarget( } }); - const debounceUpdatePos = debounce(updatePos, 50) + + let ticking = false; + const debounceUpdatePos = debounce(updatePos,1000/60+0.1); + const scrollUpdatePos = !window.requestAnimationFrame ? ()=>{ + if (!ticking) { + window.requestAnimationFrame(() => { + debounceUpdatePos(); + ticking = false; + }); + ticking = true; + } + }: debounce(updatePos,1000/60*3) + const getGapOffset = (index: number) => (Array.isArray(gap?.offset) ? gap?.offset[index] : gap?.offset) ?? 6; @@ -72,10 +84,10 @@ export default function useTarget( // update when window resize window.addEventListener('resize', updatePos); // update when window scroll stop - window.addEventListener('scroll',debounceUpdatePos) + window.addEventListener('scroll',scrollUpdatePos) return () => { window.removeEventListener('resize', updatePos); - window.removeEventListener('scroll', debounceUpdatePos); + window.removeEventListener('scroll', scrollUpdatePos); }; }, [targetElement, open, updatePos]); From a1d9d4d692e182f0a52630ab49ba7033b85cabbe Mon Sep 17 00:00:00 2001 From: wxxFE <2022095028@qq.com> Date: Sat, 24 Aug 2024 13:48:19 +0800 Subject: [PATCH 5/7] fix: optimized scrolling performance --- src/hooks/useTarget.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useTarget.ts b/src/hooks/useTarget.ts index 4107d7f..8b5ecba 100644 --- a/src/hooks/useTarget.ts +++ b/src/hooks/useTarget.ts @@ -65,7 +65,7 @@ export default function useTarget( let ticking = false; const debounceUpdatePos = debounce(updatePos,1000/60+0.1); - const scrollUpdatePos = !window.requestAnimationFrame ? ()=>{ + const scrollUpdatePos = window.requestAnimationFrame ? ()=>{ if (!ticking) { window.requestAnimationFrame(() => { debounceUpdatePos(); From 2ce104c8fa4566408c41a94afe19484741bb0742 Mon Sep 17 00:00:00 2001 From: wxxFE <2022095028@qq.com> Date: Sat, 24 Aug 2024 14:05:37 +0800 Subject: [PATCH 6/7] fix: optimized scrolling performance:test --- src/hooks/useTarget.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/hooks/useTarget.ts b/src/hooks/useTarget.ts index 8b5ecba..80eac13 100644 --- a/src/hooks/useTarget.ts +++ b/src/hooks/useTarget.ts @@ -64,18 +64,23 @@ export default function useTarget( let ticking = false; - const debounceUpdatePos = debounce(updatePos,1000/60+0.1); + const debounceUpdatePos = debounce(updatePos,1000/60*2); + let a = [] const scrollUpdatePos = window.requestAnimationFrame ? ()=>{ if (!ticking) { window.requestAnimationFrame(() => { debounceUpdatePos(); + a.push(Date.now()) ticking = false; }); ticking = true; } + console.log(a) + }: debounce(updatePos,1000/60*3) + const getGapOffset = (index: number) => (Array.isArray(gap?.offset) ? gap?.offset[index] : gap?.offset) ?? 6; From ca1b25a9db22dc68f8f6fe954b83837830154bed Mon Sep 17 00:00:00 2001 From: wxxFE <2022095028@qq.com> Date: Sat, 24 Aug 2024 15:14:39 +0800 Subject: [PATCH 7/7] fix: streamline the process --- src/hooks/useTarget.ts | 35 ++++++++++++----------------------- src/util.ts | 13 ------------- 2 files changed, 12 insertions(+), 36 deletions(-) diff --git a/src/hooks/useTarget.ts b/src/hooks/useTarget.ts index 80eac13..cf2205c 100644 --- a/src/hooks/useTarget.ts +++ b/src/hooks/useTarget.ts @@ -2,7 +2,7 @@ import useEvent from 'rc-util/lib/hooks/useEvent'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import { useMemo, useState } from 'react'; import type { TourStepInfo } from '..'; -import { isInViewPort,debounce } from '../util'; +import { isInViewPort } from '../util'; export interface Gap { offset?: number | [number, number]; @@ -62,37 +62,26 @@ export default function useTarget( } }); - - let ticking = false; - const debounceUpdatePos = debounce(updatePos,1000/60*2); - let a = [] - const scrollUpdatePos = window.requestAnimationFrame ? ()=>{ - if (!ticking) { - window.requestAnimationFrame(() => { - debounceUpdatePos(); - a.push(Date.now()) - ticking = false; - }); - ticking = true; - } - console.log(a) - - }: debounce(updatePos,1000/60*3) - - - const getGapOffset = (index: number) => (Array.isArray(gap?.offset) ? gap?.offset[index] : gap?.offset) ?? 6; + const scrollEndUpdatePos = ()=>{ + if(window.requestAnimationFrame){ + window.requestAnimationFrame(updatePos); + return; + } + setTimeout(updatePos,1000/60); + } + useLayoutEffect(() => { updatePos(); // update when window resize window.addEventListener('resize', updatePos); - // update when window scroll stop - window.addEventListener('scroll',scrollUpdatePos) + // update when window scroll end + window.addEventListener('scrollend',scrollEndUpdatePos); return () => { window.removeEventListener('resize', updatePos); - window.removeEventListener('scroll', scrollUpdatePos); + window.removeEventListener('scrollend',scrollEndUpdatePos); }; }, [targetElement, open, updatePos]); diff --git a/src/util.ts b/src/util.ts index 88d243b..cc95084 100644 --- a/src/util.ts +++ b/src/util.ts @@ -18,16 +18,3 @@ export function getPlacement( stepPlacement ?? placement ?? (targetElement === null ? 'center' : 'bottom') ); } - -export function debounce any>(func: T, wait: number): T { - let timeoutId: ReturnType; - - const debouncedFunc = (...args: Parameters): void => { - clearTimeout(timeoutId); - timeoutId = setTimeout(() => { - func(...args); - }, wait); - }; - - return debouncedFunc as T; -} \ No newline at end of file