Update content assignment to use unique token

ext/mixed/js/display.js

@@ -24,7 +24,6 @@ class Display {
         this.definitions = [];
         this.options = null;
         this.context = null;
-        this.sequence = 0;
         this.index = 0;
         this.audioPlaying = null;
         this.audioFallback = null;
@@ -36,6 +35,7 @@ class Display {
         this.interactive = false;
         this.eventListenersActive = false;
         this.clickScanPrevent = false;
+        this.setContentToken = null;
 
         this.displayGenerator = new DisplayGenerator();
         this.windowScroll = new WindowScroll();
@@ -322,26 +322,34 @@ class Display {
         }
     }
 
-    setContent(type, details) {
+    async setContent(type, details) {
+        const token = {}; // Unique identifier token
+        this.setContentToken = token;
+        try {
             switch (type) {
                 case 'terms':
-                return this.setContentTerms(details.definitions, details.context);
+                    await this.setContentTerms(details.definitions, details.context, token);
+                    break;
                 case 'kanji':
-                return this.setContentKanji(details.definitions, details.context);
+                    await this.setContentKanji(details.definitions, details.context, token);
+                    break;
                 case 'orphaned':
-                return this.setContentOrphaned();
+                    this.setContentOrphaned();
-            default:
+                    break;
-                return Promise.resolve();
+            }
+        } catch (e) {
+            this.onError(e);
+        } finally {
+            if (this.setContentToken === token) {
+                this.setContentToken = null;
+            }
         }
     }
 
-    async setContentTerms(definitions, context) {
+    async setContentTerms(definitions, context, token) {
         if (!context) { throw new Error('Context expected'); }
         if (!this.isInitialized()) { return; }
 
-        try {
-            const options = this.options;
-
         this.setEventListenersActive(false);
 
         if (context.focus !== false) {
@@ -356,8 +364,6 @@ class Display {
             this.context = DisplayContext.push(this.context, 'terms', definitions, context);
         }
 
-            const sequence = ++this.sequence;
-
         for (const definition of definitions) {
             definition.cloze = Display.clozeBuild(context.sentence, definition.source);
             definition.url = context.url;
@@ -372,6 +378,7 @@ class Display {
         }
 
         await Promise.resolve(); // Delay to help avoid forced reflow warnings in Chrome
+        if (this.setContentToken !== token) { return; }
 
         this.container.textContent = '';
         this.container.appendChild(fragment);
@@ -384,23 +391,22 @@ class Display {
             this.entrySetCurrent(index || 0);
         }
 
-            if (options.audio.enabled && options.audio.autoPlay) {
+        if (this.options.audio.enabled && this.options.audio.autoPlay) {
             this.autoPlayAudio();
         }
 
         this.setEventListenersActive(true);
 
-            await this.adderButtonUpdate(['term-kanji', 'term-kana'], sequence);
+        const states = await apiDefinitionsAddable(definitions, ['term-kanji', 'term-kana'], this.getOptionsContext());
-        } catch (e) {
+        if (this.setContentToken !== token) { return; }
-            this.onError(e);
+
-        }
+        this.updateAdderButtons(states);
     }
 
-    async setContentKanji(definitions, context) {
+    async setContentKanji(definitions, context, token) {
         if (!context) { throw new Error('Context expected'); }
         if (!this.isInitialized()) { return; }
 
-        try {
         this.setEventListenersActive(false);
 
         if (context.focus !== false) {
@@ -415,8 +421,6 @@ class Display {
             this.context = DisplayContext.push(this.context, 'kanji', definitions, context);
         }
 
-            const sequence = ++this.sequence;
-
         for (const definition of definitions) {
             definition.cloze = Display.clozeBuild(context.sentence, definition.character);
             definition.url = context.url;
@@ -431,6 +435,7 @@ class Display {
         }
 
         await Promise.resolve(); // Delay to help avoid forced reflow warnings in Chrome
+        if (this.setContentToken !== token) { return; }
 
         this.container.textContent = '';
         this.container.appendChild(fragment);
@@ -440,13 +445,13 @@ class Display {
 
         this.setEventListenersActive(true);
 
-            await this.adderButtonUpdate(['kanji'], sequence);
+        const states = await apiDefinitionsAddable(definitions, ['kanji'], this.getOptionsContext());
-        } catch (e) {
+        if (this.setContentToken !== token) { return; }
-            this.onError(e);
+
-        }
+        this.updateAdderButtons(states);
     }
 
-    async setContentOrphaned() {
+    setContentOrphaned() {
         const definitions = document.querySelector('#definitions');
         const errorOrphaned = document.querySelector('#error-orphaned');
 
@@ -483,13 +488,7 @@ class Display {
         this.audioPlay(this.definitions[0], this.firstExpressionIndex, 0);
     }
 
-    async adderButtonUpdate(modes, sequence) {
+    updateAdderButtons(states) {
-        try {
-            const states = await apiDefinitionsAddable(this.definitions, modes, this.getOptionsContext());
-            if (!states || sequence !== this.sequence) {
-                return;
-            }
-
         for (let i = 0; i < states.length; ++i) {
             const state = states[i];
             let noteId = null;
@@ -510,9 +509,6 @@ class Display {
                 this.viewerButtonShow(i, noteId);
             }
         }
-        } catch (e) {
-            this.onError(e);
-        }
     }
 
     entrySetCurrent(index) {