fix: resolve memory and runtime leaks by managing all timeouts in ModeWidget (#6665)

Author: karthik-dev56

js/widgets/modewidget.js

@@ -101,6 +101,8 @@ class ModeWidget {
         this.widgetWindow.clear();
         this.widgetWindow.show();
 
+        this._timeouts = [];
+
         // The mode table (holds a pie menu and a label)
         this.modeTableDiv = document.createElement("div");
         this.modeTableDiv.style.display = "inline";
@@ -113,6 +115,10 @@ class ModeWidget {
         this.widgetWindow.getWidgetBody().append(this.modeTableDiv);
 
         this.widgetWindow.onclose = () => {
+            if (this._timeouts) {
+                this._timeouts.forEach(id => clearTimeout(id));
+                this._timeouts = [];
+            }
             this._playing = false;
             this.hideMsgs();
             this.widgetWindow.destroy();
@@ -194,7 +200,22 @@ class ModeWidget {
 
         //.TRANS: A circle of notes represents the musical mode.
         activity.textMsg(_("Click in the circle to select notes for the mode."), 3000);
-        setTimeout(() => this.widgetWindow.sendToCenter(), 0);
+        this._setTimeout(() => this.widgetWindow.sendToCenter(), 0);
+    }
+
+    /**
+     * @private
+     * @param {Function} fn - function to execute
+     * @param {number} delay - delay in milliseconds
+     * @returns {number} timeout ID
+     */
+    _setTimeout(fn, delay) {
+        const id = setTimeout(() => {
+            this._timeouts = this._timeouts.filter(t => t !== id);
+            fn();
+        }, delay);
+        this._timeouts.push(id);
+        return id;
     }
 
     /**
@@ -258,7 +279,7 @@ class ModeWidget {
         svg.style.pointerEvents = "none";
         svg.setAttribute("height", `${400 * scale}px`);
         svg.setAttribute("width", `${400 * scale}px`);
-        setTimeout(() => {
+        this._setTimeout(() => {
             svg.style.pointerEvents = "auto";
         }, 100);
     }
@@ -427,7 +448,7 @@ class ModeWidget {
             }
             this._locked = false;
         } else {
-            setTimeout(() => {
+            this._setTimeout(() => {
                 this.__invertOnePair(i + 1);
             }, ModeWidget.ROTATESPEED);
         }
@@ -480,7 +501,7 @@ class ModeWidget {
         }
 
         if (i === 0) {
-            setTimeout(() => {
+            this._setTimeout(() => {
                 if (this._selectedNotes[0]) {
                     // We are done.
                     this._saveState();
@@ -499,7 +520,7 @@ class ModeWidget {
                 }
             }, ModeWidget.ROTATESPEED);
         } else {
-            setTimeout(() => {
+            this._setTimeout(() => {
                 this.__rotateRightOneCell((i + 1) % 12);
             }, ModeWidget.ROTATESPEED);
         }
@@ -541,7 +562,7 @@ class ModeWidget {
         }
 
         if (i === 0) {
-            setTimeout(() => {
+            this._setTimeout(() => {
                 if (this._selectedNotes[0]) {
                     // We are done.
                     this._saveState();
@@ -560,7 +581,7 @@ class ModeWidget {
                 }
             }, ModeWidget.ROTATESPEED);
         } else {
-            setTimeout(() => {
+            this._setTimeout(() => {
                 this.__rotateLeftOneCell(i - 1);
             }, ModeWidget.ROTATESPEED);
         }
@@ -647,7 +668,7 @@ class ModeWidget {
         const currentKey = keySignatureToMode(this.turtles.ithTurtle(0).singer.keySignature)[0];
         if (currentKey === "C") {
             if (i > this._notesToPlay.length - 1) {
-                setTimeout(() => {
+                this._setTimeout(() => {
                     // Did we just play the last note?
                     this._playing = false;
                     const note_key = this._pianoKeys ? this._pianoKeys[0] : null;
@@ -669,7 +690,7 @@ class ModeWidget {
                 return;
             }
 
-            setTimeout(() => {
+            this._setTimeout(() => {
                 if (this._lastNotePlayed !== null) {
                     this._playWheel.navItems[this._lastNotePlayed % 12].navItem.hide();
                     const note_key = this._pianoKeys
@@ -707,13 +728,13 @@ class ModeWidget {
                     this.__playNextNote(i + 1);
                 } else {
                     this._locked = false;
-                    setTimeout(() => this._resetNotes(), ModeWidget.RESET_NOTES_DELAY);
+                    this._setTimeout(() => this._resetNotes(), ModeWidget.RESET_NOTES_DELAY);
                     return;
                 }
             }, 1000 * time);
         } else {
             if (i > this._notesToPlay.length - 1) {
-                setTimeout(() => {
+                this._setTimeout(() => {
                     // Did we just play the last note?
                     this._playing = false;
                     this._playButton.innerHTML = `&nbsp;&nbsp;<img 
@@ -731,7 +752,7 @@ class ModeWidget {
                 return;
             }
 
-            setTimeout(() => {
+            this._setTimeout(() => {
                 if (this._lastNotePlayed !== null) {
                     this._playWheel.navItems[this._lastNotePlayed % 12].navItem.hide();
                 }
@@ -754,7 +775,7 @@ class ModeWidget {
                     this.__playNextNote(i + 1);
                 } else {
                     this._locked = false;
-                    setTimeout(() => this._resetNotes(), ModeWidget.RESET_NOTES_DELAY);
+                    this._setTimeout(() => this._resetNotes(), ModeWidget.RESET_NOTES_DELAY);
                     return;
                 }
             }, 1000 * time);
@@ -1075,7 +1096,7 @@ class ModeWidget {
 
         // Create a new stack for the chunk.
         // console.debug(newStack);
-        setTimeout(() => {
+        this._setTimeout(() => {
             this.blocks.loadNewBlocks(newStack);
         }, 2000);
     }