Merge pull request #60 from shinsenter/develop

Reduce delays between promises in promise chain
shinsenter · Jan 8, 2021 · 80e304c · 80e304c
2 parents e0e6819 + f132d32
commit 80e304c
Show file tree

Hide file tree

Showing 9 changed files with 150 additions and 181 deletions.
diff --git a/build/.uglifyjs b/build/.uglifyjs
@@ -13,7 +13,7 @@
         "indent_level":       0,
         "indent_start":       0,
         "inline_script":      true,
-        "keep_quoted_props":  false,
+        "keep_quoted_props":  true,
         "max_line_len":       false,
         "preamble":           null,
         "preserve_line":      false,

diff --git a/dist/defer.min.js b/dist/defer.min.js
diff --git a/dist/defer_plus.min.js b/dist/defer_plus.min.js
diff --git a/docs/demo.html b/docs/demo.html
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shinsenter/defer.js",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "description": "🥇 A super tiny, native performant library for lazy-loading JS, CSS, images, iframes... Defer almost anything, easily speed up your website. https://github.com/shinsenter/defer.js",
   "homepage": "https://github.com/shinsenter/defer.js#readme",
   "author": "Mai Nhut Tan <[email protected]>",

diff --git a/src/defer.js b/src/defer.js
@@ -42,18 +42,23 @@
     load_event,
 
     // Dequeue method
-    dequeue, func_queue,
+    func_dequeue,
+
+    // The function queue
+    queue,
 
     // Variable placeholder
     dom_loaded,
 
-    // Ultilities
-    append2head
+    // Utilities
+    fn_append
 ) {
 
     // Check if load event was fired
-    dom_loaded  = (/p/).test(document.readyState);
-    append2head = document.head.appendChild.bind(document.head);
+    dom_loaded = (/p/).test(document.readyState);
+
+    // Append node to the <head> tag
+    fn_append  = document.head.appendChild.bind(document.head);
 
     /**
      * This is our hero: the `defer` function.
@@ -65,49 +70,47 @@
      * @returns {void}
      */
     function defer(func, delay) {
-        var default_delay = 1;
-
         if (dom_loaded) {
-            dequeue(func, delay || default_delay);
+            func_dequeue(func, delay);
         } else {
-            func_queue.push(func, delay);
+            queue.push(func, delay);
         }
     }
 
     /**
      * This method will be triggled when `load` event was fired.
      * This will also turn `dom_loaded` into `true`...
-     * ... and run all function in queue using `dequeue` method.
+     * ... and run all function in queue using `func_dequeue` method.
      *
      * @returns {void}
      */
-    function flushqueue() {
-        for (dom_loaded = 1; func_queue[0];) {
-            defer(func_queue.shift(), func_queue.shift());
+    function flush_queue() {
+        for (dom_loaded = 1; queue[0];) {
+            func_dequeue(queue.shift(), queue.shift());
         }
     }
 
     /**
      * Create a DOM element if not exist.
      *
-     * @param   {string}    tag         Tag name
-     * @param   {string}    id          The DOM's id
+     * @param   {string}    tag_name    Tag name
+     * @param   {string}    id          The DOMNode's id
      * @param   {function}  callback    The callback function when load
-     * @param   {object}    dom         The placeholder for the DOM
-     * @returns {object}    The DOM
+     * @param   {object}    node        The placeholder for the DOMNode
+     * @returns {object}    The DOMNode
      */
-    function dom(tag, id, callback, dom) {
-        dom = document.createElement(tag || 'SCRIPT');
+    function fn_tag(tag_name, id, callback, node) {
+        node = document.createElement(tag_name || 'SCRIPT');
 
         if (id) {
-            dom.id = id;
+            node.id = id;
         }
 
         if (callback) {
-            dom.onload = callback;
+            node.onload = callback;
         }
 
-        return document.getElementById(id) || dom;
+        return document.getElementById(id) || node;
     }
 
     /**
@@ -123,18 +126,18 @@
      */
     function deferscript(src, id, delay, callback) {
         defer(function (element) {
-            element = dom(0, id, callback);
+            element = fn_tag(0, id, callback);
             element.src = src;
-            append2head(element);
+            fn_append(element);
         }, delay);
     }
 
     // Add event listener into global scope
-    window.addEventListener('on' + load_event in window ? load_event : 'load', flushqueue);
+    window.addEventListener('on' + load_event in window ? load_event : 'load', flush_queue);
 
     // Export functions into the global scope
-    defer._            = dom;
-    defer.$            = append2head;
+    defer._            = fn_tag;
+    defer.$            = fn_append;
     window.defer       = defer;
     window.deferscript = deferscript;
 

diff --git a/src/demo.html b/src/demo.html
@@ -39,11 +39,11 @@
 
     <title>@shinsenter/defer.js - Easily lazy-load JS, CSS, images, iframes</title>
 
-    <!-- <script src="../dist/defer_plus.min.js?v=1.1.13"></script> -->
+    <!-- <script src="../dist/defer_plus.min.js?v=1.1.14"></script> -->
     <!-- <script type="deferjs">'IntersectionObserver'in window||deferscript('../dist/polyfill.min.js', 'polyfill-js', 1)</script> -->
 
-    <script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].13/dist/defer_plus.min.js"></script>
-    <script type="deferjs">'IntersectionObserver'in window||deferscript('https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].13/dist/polyfill.min.js', 'polyfill-js', 1)</script>
+    <script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].14/dist/defer_plus.min.js"></script>
+    <script type="deferjs">'IntersectionObserver'in window||deferscript('https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].14/dist/polyfill.min.js', 'polyfill-js', 1)</script>
 
     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
     <meta name="mobile-web-app-capable" content="yes">
@@ -304,7 +304,7 @@
         gtag('config', 'UA-34520609-2');
     </script>
 
-    <script type="deferjs">
+    <script>
         // lazy-load Google Tag Manager and social button scripts
         if (/^http/.test(window.location.protocol)) {
             deferscript('https://www.googletagmanager.com/gtag/js?id=UA-34520609-2', 'google-tag', 1000);
@@ -349,10 +349,10 @@ <h2 id="getting-started">Getting started</h2>
             <br />
             <pre class="notranslate"><code>Code:</code><code class="highlight html">&lt;head&gt;
     &lt;title&gt;My awesome page&lt;/title&gt;
-    &lt;script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].13/dist/defer_plus.min.js"&gt;&lt;/script&gt;
+    &lt;script src="https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].14/dist/defer_plus.min.js"&gt;&lt;/script&gt;
 
     &lt;!-- You may want to add small polyfill for IE 9~11 --&gt;
-    &lt;script&gt;deferscript('https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].13/dist/polyfill.min.js', 'polyfill-js', 1)&lt;/script&gt;
+    &lt;script&gt;deferscript('https://cdn.jsdelivr.net/npm/@shinsenter/[email protected].14/dist/polyfill.min.js', 'polyfill-js', 1)&lt;/script&gt;
 &lt;/head&gt;</code></pre>
             <p>Because the <a href="https://github.com/shinsenter/defer.js/blob/master/defer_plus.min.js" target="_blank" title="minified version of defer.js">minified version</a> of defer.js is super
                 tiny, you can inline its content directly into the
@@ -693,41 +693,39 @@ <h2>Follow the project on Github</h2>
         <p>From <span class="big" title="Vietnam">🇻🇳</span> with love.</p>
     </div>
 
-    <script type="deferjs">
+    <script>
     // Defer Test
+    window.console = window.console || {}
+    window.console.info = window.console.info || Function();
+    var tracker = [];
     defer(function () {
-        window.console = window.console || {}
-        window.console.info = window.console.info || Function();
-        var tracker = [];
-        defer(function () {
-            tracker.push(1), console.info('defer.js test #1 (throws an exception: foo is not defined)'), foo.push(bar)
-        }, 200);
-        defer(function () {
-            tracker.push(2), console.info('defer.js test #2 (even though an exception has been thrown)')
-        }, 200);
-        defer(function () {
-            tracker.push(3), console.info('defer.js test #3')
-        }, 200);
-        defer(function () {
-            tracker.push(4), console.info('defer.js test #4')
-        }, 200);
-        defer(function () {
-            tracker.push(5), console.info('defer.js test #5')
-        }, 200);
-        defer(function () {
-            tracker.push(0), console.info('defer.js test #0 (the latest call, but has lower delay time)')
-        }, 199);
-        defer(function () {
-            console.info('Completed! ' + (tracker == '0,1,2,3,4,5' ? 'Test passed!!!' : 'Test failed. ' + tracker))
-        }, 201);
-    });
+        tracker.push(1), console.info('defer.js test #1 (throws an exception: foo is not defined)'), bar()
+    }, 200);
+    defer(function () {
+        tracker.push(2), console.info('defer.js test #2 (even though an exception has been thrown)')
+    }, 200);
+    defer(function () {
+        tracker.push(3), console.info('defer.js test #3')
+    }, 200);
+    defer(function () {
+        tracker.push(4), console.info('defer.js test #4')
+    }, 200);
+    defer(function () {
+        tracker.push(5), console.info('defer.js test #5')
+    }, 200);
+    defer(function () {
+        tracker.push(0), console.info('defer.js test #0 (the latest call, but has lower delay time)')
+    }, 199);
+    defer(function () {
+        console.info('Completed! ' + (tracker == '0,1,2,3,4,5' ? 'Test passed!!!' : 'Test failed. ' + tracker))
+    }, 201);
     </script>
 
-    <script type="deferjs">console.log('deferjs script tags test 1');</script>
-    <script type="deferjs">console.log('deferjs script tags test 2');</script>
-    <script type="deferjs">console.log('deferjs script tags test 3');</script>
-    <script type="deferjs">console.log('deferjs script tags test 4');</script>
-    <script type="deferjs">console.log('deferjs script tags test 5');</script>
+    <script type="deferjs">console.log('deferjs script tags test 1')</script>
+    <script type="deferjs">console.log('deferjs script tags test 2 with exception'),foo()</script>
+    <script type="deferjs">console.log('deferjs script tags test 3 runs after the exception')</script>
+    <script type="deferjs">console.log('deferjs script tags test 4')</script>
+    <script type="deferjs">console.log('deferjs script tags test 5')</script>
 </body>
 
 </html>