From a7488c188e2577a4f3e6ce7201926f052b01f34f Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Thu, 9 May 2024 00:21:05 +0800
Subject: [PATCH] perf: debounce `handleOsScroll` (#735)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: debounce handleOsScroll in OverlayScrollbarsComponent

* fix: 改成箭头函数写法

* refactor: use `useDebounceFn` for debounce handleOsScroll

---------

Co-authored-by: pengyunfei <pengyunfei@360.cn>
---
 src/contentScripts/views/App.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 2bb84bc8..88c5b392 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useThrottleFn, useToggle } from '@vueuse/core'
+import { useDebounceFn, useThrottleFn, useToggle } from '@vueuse/core'
 import type { Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import browser from 'webextension-polyfill'
@@ -196,7 +196,7 @@ function handleAdaptToOtherPageStylesChange() {
     document.documentElement.classList.remove('bewly-design')
 }
 
-function handleOsScroll() {
+const handleOsScroll = useDebounceFn(() => {
   const osInstance = scrollbarRef.value?.osInstance()
   const { viewport } = osInstance.elements()
   const { scrollTop, scrollHeight, clientHeight } = viewport // get scroll offset
@@ -211,7 +211,7 @@ function handleOsScroll() {
 
   if (isHomePage())
     topBarRef.value?.handleScroll()
-}
+}, 50)
 
 function handleBlockAds() {
   // Do not use the "ads" keyword. AdGuard, AdBlock, and some ad-blocking extensions will