Fix for race condition in readystate detection

src/htmx.js

@@ -3724,25 +3724,34 @@ return (function () {
         //====================================================================
         // Initialization
         //====================================================================
-        var isReady = false
-        getDocument().addEventListener('DOMContentLoaded', function() {
-            isReady = true
-        })
-
         /**
-         * Execute a function now if DOMContentLoaded has fired, otherwise listen for it.
-         *
-         * This function uses isReady because there is no realiable way to ask the browswer whether
-         * the DOMContentLoaded event has already been fired; there's a gap between DOMContentLoaded
-         * firing and readystate=complete.
+         * We want to initialize the page elements after DOMContentLoaded
+         * fires, but there isn't always a good way to tell whether
+         * it has already fired when we get here or not.
          */
-        function ready(fn) {
-            // Checking readyState here is a failsafe in case the htmx script tag entered the DOM by
-            // some means other than the initial page load.
-            if (isReady || getDocument().readyState === 'complete') {
-                fn();
-            } else {
-                getDocument().addEventListener('DOMContentLoaded', fn);
+        function ready(functionToCall) {
+            // call the function exactly once no matter how many times this is called
+            var callReadyFunction = function() {
+                if (!functionToCall) return;
+                functionToCall();
+                functionToCall = null;
+            };
+
+            if (getDocument().readyState === "complete") {
+                // DOMContentLoaded definitely fired, we can initialize the page
+                callReadyFunction();
+            }
+            else {
+                /* DOMContentLoaded *maybe* already fired, wait for
+                 * the next DOMContentLoaded or readystatechange event
+                 */
+                getDocument().addEventListener("DOMContentLoaded", function() {
+                    callReadyFunction();
+                });
+                getDocument().addEventListener("readystatechange", function() {
+                    if (getDocument().readyState !== "complete") return;
+                    callReadyFunction();
+                });
             }
         }