refactor: throttle reworked with tests

Author: J-Sek

packages/vuetify/src/composables/nested/nested.ts

@@ -221,8 +221,11 @@ export const useNested = (props: NestedProps) => {
   const nodeIds = new Set<unknown>()
 
   const itemsUpdatePropagation = throttle(() => {
-    children.value = new Map(children.value)
-    parents.value = new Map(parents.value)
+    // setTimeout makes the checkboxes selection appear faster
+    setTimeout(() => {
+      children.value = new Map(children.value)
+      parents.value = new Map(parents.value)
+    })
   }, 100)
 
   const nested: NestedProvide = {

packages/vuetify/src/util/__tests__/throttle.spec.ts

@@ -0,0 +1,77 @@
+import { throttle } from '../throttle'
+
+// Utilities
+import { wait } from '@test'
+
+describe('throttle', () => {
+  it('should execute only the calls right before the interval', async () => {
+    const result = [] as number[]
+    const pushThrottled = throttle((v: number) => result.push(v), 100, { leading: false, trailing: false })
+
+    let lastId = 0
+    const interval = setInterval(() => pushThrottled(++lastId), 30)
+    await wait(280)
+    clearInterval(interval)
+
+    expect(result).toStrictEqual([5, 9])
+  })
+
+  it('should execute only the calls right before the interval + trailing one', async () => {
+    const result = [] as number[]
+    const pushThrottled = throttle((v: number) => result.push(v), 100, { leading: false, trailing: true })
+
+    let lastId = 0
+    const interval = setInterval(() => pushThrottled(++lastId), 30)
+    await wait(280)
+    clearInterval(interval)
+    await wait(100)
+
+    expect(result).toStrictEqual([4, 7, 9])
+  })
+
+  it('should keep throttling after executing trailing call', async () => {
+    const result = [] as number[]
+    const pushThrottled = throttle((v: number) => result.push(v), 100, { leading: false, trailing: true })
+
+    let lastId = 0
+    setTimeout(() => pushThrottled(++lastId), 0)
+    setTimeout(() => pushThrottled(++lastId), 40)
+    setTimeout(() => pushThrottled(++lastId), 180)
+    setTimeout(() => pushThrottled(++lastId), 190)
+    await wait(280)
+
+    expect(result).toStrictEqual([2, 4])
+  })
+
+  it('should execute only the calls right before the interval + leading and trailing', async () => {
+    const result = [] as number[]
+    const pushThrottled = throttle((v: number) => result.push(v), 100)
+
+    let lastId = 0
+    const interval = setInterval(() => pushThrottled(++lastId), 30)
+    await wait(280)
+    clearInterval(interval)
+    await wait(100)
+
+    expect(result).toStrictEqual([1, 4, 7, 9])
+  })
+
+  it('should pass calls the same way when resumed', async () => {
+    const result = [] as number[]
+    const pushThrottled = throttle((v: number) => result.push(v), 100)
+
+    let lastId = 0
+    let interval = setInterval(() => pushThrottled(++lastId), 30)
+    await wait(280)
+    clearInterval(interval)
+    await wait(150)
+
+    lastId = 200
+    interval = setInterval(() => pushThrottled(++lastId), 30)
+    await wait(280)
+    clearInterval(interval)
+    await wait(100)
+
+    expect(result).toStrictEqual([1, 4, 7, 9, 201, 204, 207, 209])
+  })
+})

packages/vuetify/src/util/helpers.ts

@@ -420,45 +420,6 @@ export function debounce (fn: Function, delay: MaybeRef<number>) {
   return wrap
 }
 
-export function throttle<T extends (...args: any[]) => any> (
-  fn: T,
-  delay: number,
-  options = { leading: true, trailing: true },
-) {
-  let timeoutId = 0
-  let lastExec = 0
-  let throttling = false
-
-  const wrap = (...args: Parameters<T>): void | ReturnType<T> => {
-    clearTimeout(timeoutId)
-    const now = Date.now()
-    const elapsed = now - lastExec
-
-    if (!throttling || elapsed >= delay) {
-      lastExec = now
-    }
-    if ((!throttling && options.leading) || elapsed >= delay) {
-      window.setTimeout(() => fn(...args)) // ignore 'fn' executin errors
-    }
-
-    throttling = true
-    timeoutId = window.setTimeout(() => {
-      throttling = false
-      if (options.trailing) {
-        fn(...args)
-      }
-    }, delay)
-  }
-
-  wrap.clear = () => {
-    clearTimeout(timeoutId)
-    lastExec = 0
-    throttling = false
-  }
-  wrap.immediate = fn
-  return wrap
-}
-
 export function clamp (value: number, min = 0, max = 1) {
   return Math.max(min, Math.min(max, value))
 }

packages/vuetify/src/util/index.ts

@@ -18,3 +18,4 @@ export * from './isFixedPosition'
 export * from './propsFactory'
 export * from './useRender'
 export * from './timeUtils'
+export * from './throttle'

packages/vuetify/src/util/throttle.ts

@@ -0,0 +1,46 @@
+export function throttle<T extends (...args: any[]) => any> (
+  fn: T,
+  delay: number,
+  options = { leading: true, trailing: true },
+) {
+  let timeoutId = 0
+  let lastExec = 0
+  let throttling = false
+  let start = 0
+
+  function clear () {
+    clearTimeout(timeoutId)
+    throttling = false
+    start = 0
+  }
+
+  const wrap = (...args: Parameters<T>): void | ReturnType<T> => {
+    clearTimeout(timeoutId)
+
+    const now = Date.now()
+
+    if (!start) start = now
+    const elapsed = now - Math.max(start, lastExec)
+
+    function invoke () {
+      lastExec = Date.now()
+      timeoutId = window.setTimeout(clear, delay)
+      fn(...args)
+    }
+
+    if (!throttling) {
+      throttling = true
+      if (options.leading) {
+        invoke()
+      }
+    } else if (elapsed >= delay) {
+      invoke()
+    } else if (options.trailing) {
+      timeoutId = window.setTimeout(invoke, delay - elapsed)
+    }
+  }
+
+  wrap.clear = clear
+  wrap.immediate = fn
+  return wrap
+}