Merge pull request #431 from ismail9k/340-carousel-flickers-when-resi…

…zing-it

340 carousel flickers when resizing it

src/components/Carousel.ts

@@ -125,7 +125,7 @@ export default defineComponent({
       updateBreakpointsConfig()
       updateSlidesData()
       updateSlideSize()
-    }, 16)
+    })
 
     /**
      * Setup functions
@@ -168,8 +168,6 @@ export default defineComponent({
       updateBreakpointsConfig()
       initAutoplay()
 
-      window.addEventListener('resize', handleResize, { passive: true })
-
       resizeObserver = new ResizeObserver(handleResize)
       if (root.value) {
         resizeObserver.observe(root.value)
@@ -189,10 +187,6 @@ export default defineComponent({
         resizeObserver.unobserve(root.value)
         resizeObserver = null
       }
-
-      window.removeEventListener('resize', handleResize, {
-        passive: true,
-      } as EventListenerOptions)
     })
 
     /**

src/utils/debounce.ts

@@ -1,18 +1,19 @@
 /**
- * return a debounced version of the function
- * @param fn
- * @param delay
+ * Returns a debounced version of the function using requestAnimationFrame.
+ *
+ * @param fn - The function to debounce.
  */
-// eslint-disable-next-line no-unused-vars
-export function debounce(fn: (...args: any[]) => unknown, delay: number): typeof fn {
-  let timerId: ReturnType<typeof setTimeout> | null
+export function debounce(fn: (...args: any[]) => unknown): (...args: any[]) => void {
+  let frameId: number | null = null
+
   return function (...args: any[]) {
-    if (timerId) {
-      clearTimeout(timerId)
+    if (frameId) {
+      cancelAnimationFrame(frameId)
     }
-    timerId = setTimeout(() => {
+
+    frameId = requestAnimationFrame(() => {
       fn(...args)
-      timerId = null
-    }, delay)
+      frameId = null
+    })
   }
 }

src/utils/throttle.ts

@@ -1,18 +1,18 @@
 /**
- * return a throttle version of the function
- * Throttling
+ * Returns a throttled version of the function using requestAnimationFrame.
  *
+ * @param fn - The function to throttle.
  */
-// eslint-disable-next-line no-unused-vars
-export function throttle(fn: (...args: any[]) => unknown): typeof fn {
-  let isRunning = false
+export function throttle(fn: (...args: any[]) => unknown): (...args: any[]) => void {
+  let isThrottled = false
+
   return function (...args: any[]) {
-    if (!isRunning) {
-      isRunning = true
-      requestAnimationFrame(() => {
-        fn.apply(this, args)
-        isRunning = false
-      })
-    }
+    if (isThrottled) return
+
+    isThrottled = true
+    requestAnimationFrame(() => {
+      fn(...args)
+      isThrottled = false
+    })
   }
 }