fix: debounce queue idle/empty events (#3103)

Browsers and Node.js handle resuming control from `yield` slightly
differently - a queue that empties in browsers can end up repeating
it's idle even when a new job is being added so debounce the call
to trigger after a (very) short time has passed.

Author: achingbrain

packages/utils/src/queue/index.ts

@@ -1,6 +1,7 @@
 import { AbortError, TypedEventEmitter } from '@libp2p/interface'
 import { pushable } from 'it-pushable'
 import { raceEvent } from 'race-event'
+import { debounce } from '../debounce.js'
 import { QueueFullError } from '../errors.js'
 import { Job } from './job.js'
 import type { AbortOptions, Metrics } from '@libp2p/interface'
@@ -149,22 +150,33 @@ export class Queue<JobReturnType = unknown, JobOptions extends AbortOptions = Ab
 
     this.sort = init.sort
     this.queue = []
+
+    this.emitEmpty = debounce(this.emitEmpty.bind(this), 1)
+    this.emitIdle = debounce(this.emitIdle.bind(this), 1)
+  }
+
+  emitEmpty (): void {
+    if (this.size !== 0) {
+      return
+    }
+
+    this.safeDispatchEvent('empty')
+  }
+
+  emitIdle (): void {
+    if (this.running !== 0) {
+      return
+    }
+
+    this.safeDispatchEvent('idle')
   }
 
   private tryToStartAnother (): boolean {
     if (this.size === 0) {
-      // do this in the microtask queue so all job recipients receive the
-      // result before the "empty" event fires
-      queueMicrotask(() => {
-        this.safeDispatchEvent('empty')
-      })
+      this.emitEmpty()
 
       if (this.running === 0) {
-        // do this in the microtask queue so all job recipients receive the
-        // result before the "idle" event fires
-        queueMicrotask(() => {
-          this.safeDispatchEvent('idle')
-        })
+        this.emitIdle()
       }
 
       return false

packages/utils/test/queue.spec.ts

@@ -340,6 +340,9 @@ describe('queue', () => {
     expect(queue).to.have.property('size', 0)
     expect(queue).to.have.property('queued', 0)
     expect(queue).to.have.property('running', 0)
+
+    await delay(10)
+
     expect(timesCalled).to.equal(1)
 
     const job3 = queue.add(async () => delay(100))
@@ -356,6 +359,8 @@ describe('queue', () => {
     expect(queue).to.have.property('queued', 0)
     expect(queue).to.have.property('running', 0)
 
+    await delay(10)
+
     expect(timesCalled).to.equal(2)
   })
 
@@ -392,6 +397,9 @@ describe('queue', () => {
     expect(queue).to.have.property('size', 0)
     expect(queue).to.have.property('queued', 0)
     expect(queue).to.have.property('running', 0)
+
+    await delay(10)
+
     expect(timesCalled).to.equal(1)
   })