fix(watchThrottled): duplicate callback invokation when leading and trailing edges coincide (#1593)

Author: bodograumann

packages/core/useThrottledRefHistory/index.test.ts

@@ -16,7 +16,7 @@ describe('useThrottledRefHistory - sync', () => {
 
     await promiseTimeout(ms * 3)
 
-    expect(history.value.length).toBe(3)
+    expect(history.value.length).toBe(2)
     expect(history.value[0].snapshot).toBe(100)
 
     v.value = 200
@@ -25,7 +25,7 @@ describe('useThrottledRefHistory - sync', () => {
 
     await promiseTimeout(ms * 3)
 
-    expect(history.value.length).toBe(5)
+    expect(history.value.length).toBe(3)
     expect(history.value[0].snapshot).toBe(400)
   })
 })

packages/shared/utils/filters.ts

@@ -103,7 +103,7 @@ export function debounceFilter(ms: MaybeRef<number>, options: DebounceFilterOpti
 export function throttleFilter(ms: MaybeRef<number>, trailing = true, leading = true) {
   let lastExec = 0
   let timer: ReturnType<typeof setTimeout> | undefined
-  let preventLeading = !leading
+  let isLeading = true
 
   const clear = () => {
     if (timer) {
@@ -123,24 +123,23 @@ export function throttleFilter(ms: MaybeRef<number>, trailing = true, leading =
       return invoke()
     }
 
-    if (elapsed > duration) {
+    if (elapsed > duration && (leading || !isLeading)) {
       lastExec = Date.now()
-      if (preventLeading)
-        preventLeading = false
-      else invoke()
+      invoke()
     }
-    if (trailing) {
+    else if (trailing) {
       timer = setTimeout(() => {
         lastExec = Date.now()
-        if (!leading)
-          preventLeading = true
+        isLeading = true
         clear()
         invoke()
       }, duration)
     }
 
     if (!leading && !timer)
-      timer = setTimeout(() => preventLeading = true, duration)
+      timer = setTimeout(() => isLeading = true, duration)
+
+    isLeading = false
   }
 
   return filter

packages/shared/utils/index.test.ts

@@ -77,20 +77,6 @@ describe('filters', () => {
     expect(debouncedFilterSpy).toHaveBeenCalledTimes(2)
   })
 
-  it('should throttle', () => {
-    const debouncedFilterSpy = vitest.fn()
-    const filter = createFilterWrapper(throttleFilter(1000), debouncedFilterSpy)
-
-    setTimeout(filter, 500)
-    setTimeout(filter, 500)
-    setTimeout(filter, 500)
-    setTimeout(filter, 500)
-
-    vitest.runAllTimers()
-
-    expect(debouncedFilterSpy).toHaveBeenCalledTimes(2)
-  })
-
   it('should throttle with ref', () => {
     const debouncedFilterSpy = vitest.fn()
     const throttle = ref(0)
@@ -107,4 +93,15 @@ describe('filters', () => {
 
     expect(debouncedFilterSpy).toHaveBeenCalledTimes(2)
   })
+
+  it('should not duplicate single event', () => {
+    const debouncedFilterSpy = vitest.fn()
+    const filter = createFilterWrapper(throttleFilter(1000), debouncedFilterSpy)
+
+    setTimeout(filter, 500)
+
+    vitest.runAllTimers()
+
+    expect(debouncedFilterSpy).toHaveBeenCalledTimes(1)
+  })
 })