2 files changed, 31 insertions, 3 deletions

diff --git a/.eslintrc.js b/.eslintrc.js
index 218f5609..f33aca09 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -50,13 +50,14 @@ module.exports = {
     globals: {
         //script.js
         gradioApp: "readonly",
+        executeCallbacks: "readonly",
+        onAfterUiUpdate: "readonly",
+        onOptionsChanged: "readonly",
         onUiLoaded: "readonly",
         onUiUpdate: "readonly",
-        onOptionsChanged: "readonly",
         uiCurrentTab: "writable",
-        uiElementIsVisible: "readonly",
         uiElementInSight: "readonly",
-        executeCallbacks: "readonly",
+        uiElementIsVisible: "readonly",
         //ui.js
         opts: "writable",
         all_gallery_buttons: "readonly",
diff --git a/script.js b/script.js
index 46310f35..de9d7e22 100644
--- a/script.js
+++ b/script.js
@@ -19,9 +19,11 @@ function get_uiCurrentTabContent() {
 }
 
 var uiUpdateCallbacks = [];
+var uiAfterUpdateCallbacks = [];
 var uiLoadedCallbacks = [];
 var uiTabChangeCallbacks = [];
 var optionsChangedCallbacks = [];
+var uiAfterUpdateTimeout = null;
 var uiCurrentTab = null;
 
 /**
@@ -33,6 +35,18 @@ function onUiUpdate(callback) {
 }
 
 /**
+ * Register callback to be called soon after UI updates.
+ * The callback receives no arguments.
+ *
+ * This is preferred over `onUiUpdate` if you don't need
+ * access to the MutationRecords, as your function will
+ * not be called quite as often.
+ */
+function onAfterUiUpdate(callback) {
+    uiAfterUpdateCallbacks.push(callback);
+}
+
+/**
  * Register callback to be called when the UI is loaded.
  * The callback receives no arguments.
  */
@@ -66,6 +80,18 @@ function executeCallbacks(queue, arg) {
         }
     }
 }
+
+/**
+ * Schedule the execution of the callbacks registered with onAfterUiUpdate.
+ * The callbacks are executed after a short while, unless another call to this function
+ * is made before that time. IOW, the callbacks are executed only once, even
+ * when there are multiple mutations observed.
+ */
+function scheduleAfterUiUpdateCallbacks() {
+    clearTimeout(uiAfterUpdateTimeout);
+    uiAfterUpdateTimeout = setTimeout(function() {
+        executeCallbacks(uiAfterUpdateCallbacks);
+    }, 200);
 }
 
 var executedOnLoaded = false;
@@ -78,6 +104,7 @@ document.addEventListener("DOMContentLoaded", function() {
         }
 
         executeCallbacks(uiUpdateCallbacks, m);
+        scheduleAfterUiUpdateCallbacks();
         const newTab = get_uiCurrentTab();
         if (newTab && (newTab !== uiCurrentTab)) {
             uiCurrentTab = newTab;