improve debouncing with lodash

AxeObserver.js

@@ -1,4 +1,5 @@
 import axeCore from 'axe-core'
+import debounce from 'lodash.debounce'
 
 // If requestIdleCallback is not supported, we fallback to setTimeout
 // Ref: https://developers.google.com/web/updates/2015/08/using-requestidlecallback
@@ -8,16 +9,6 @@ const requestIdleCallback =
     setTimeout(callback, 1)
   }
 
-// Define own debounce function to avoid excess dependencies
-// Ref: https://chrisboakes.com/how-a-javascript-debounce-function-works/
-function debounce(callback, wait) {
-  let timeout
-  return (...args) => {
-    clearTimeout(timeout)
-    timeout = setTimeout(() => callback.apply(this, args), wait)
-  }
-}
-
 // The AxeObserver class takes a violationsCallback, which is invoked with an
 // array of observed violations.
 export default class AxeObserver {
@@ -53,14 +44,15 @@ export default class AxeObserver {
 
     axeCore.configure(axeConfiguration)
   }
-  observe(targetNode, debounceMs = 1000) {
+  observe(targetNode, debounceMs = 1000, maxWaitMs = debounceMs * 5) {
     if (!targetNode) {
       throw new Error('AxeObserver.observe requires a targetNode')
     }
 
     const scheduleAudit = debounce(
       () => requestIdleCallback(() => this._auditTargetNode(targetNode)),
-      debounceMs
+      debounceMs,
+      { leading: true, maxWait: maxWaitMs }
     )
     const mutationObserver = new window.MutationObserver(scheduleAudit)
 

README.MD

@@ -13,8 +13,9 @@ npm install --save-dev agnostic-axe
 ## Usage
 
 ```js
-import('agnostic-axe').then(({ AxeObserver, logViolations }) => {
-  const MyAxeObserver = new AxeObserver(logViolations)
+import('agnostic-axe').then(({ AxeObserver, ViolationReporter }) => {
+  const MyViolationReporter = new ViolationReporter()
+  const MyAxeObserver = new AxeObserver(MyViolationReporter.reportViolations)
   MyAxeObserver.observe(document)
 })
 ```
@@ -39,7 +40,8 @@ The `AxeObserver` constructor takes two parameters:
 The `AxeObserver.observe` method takes two parameters:
 
 - `targetNode` (required). The node that should be observed & analyzed.
-- `debounceMs` (optional, defaults to `1000`). The number of milliseconds to wait for component updates to cease before performing an analysis of all the changes.
+- `debounceMs` (optional, defaults to `1000`). The number of milliseconds that updates should cease before an analysis is performed.
+- `maxWaitMs` (optional, defaults to `debounceMs * 5`). Number of milliseconds after which an analysis will be performed, even if the targetNode is still updating.
 
 ## Credits
 

package.json

@@ -40,6 +40,7 @@
     }
   },
   "dependencies": {
-    "axe-core": "^3.4.0"
+    "axe-core": "^3.4.0",
+    "lodash.debounce": "^4.0.8"
   }
 }