switch to promise batching on attributeChangedCallback

github · Nov 25, 2022 · a1bd31e · a1bd31e
1 parent cd93168
commit a1bd31e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts
@@ -79,7 +79,7 @@ const dateObserver = new (class {
 
 export default class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFormatOptions {
   #customTitle = false
-  #updating = false
+  #updating: false | Promise<void> = false
 
   get #lang() {
     return this.closest('[lang]')?.getAttribute('lang') ?? 'default'
@@ -341,12 +341,14 @@ export default class RelativeTimeElement extends HTMLElement implements Intl.Dat
       this.#customTitle = newValue !== null && this.getFormattedTitle() !== newValue
     }
     if (!this.#updating && !(attrName === 'title' && this.#customTitle)) {
-      this.update()
+      this.#updating = (async () => {
+        await Promise.resolve()
+        this.update()
+      })()
     }
   }
 
   update() {
-    this.#updating = true
     const oldText: string = this.#renderRoot.textContent || ''
     const oldTitle: string = this.getAttribute('title') || ''
     let newTitle: string = oldTitle

diff --git a/test/relative-time.js b/test/relative-time.js
@@ -66,7 +66,7 @@ suite('relative-time', function () {
     el.setAttribute('hour', '2-digit')
     el.setAttribute('minute', '2-digit')
     await Promise.resolve()
-    assert.equal(counter, 3)
+    assert.equal(counter, 1)
   })
 
   test('sets title back to default if removed', async () => {