Issue #1889394 by droplet, nod_: Choose one JS debounce function.

core/misc/debounce.js

 /**
  * Limits the invocations of a function in a given time frame.
  *
+ * Adapted from underscore.js with the addition Drupal namespace.
+ *
  * The debounce function wrapper should be used sparingly. One clear use case
  * is limiting the invocation of a callback attached to the window resize event.
  *
@@ -17,7 +19,7 @@
  *   invoked once. For example if the wait period is 250ms, then the callback
  *   will only be called at most 4 times per second.
  */
-Drupal.debounce = function (callback, wait) {
+Drupal.debounce = function (func, wait, immediate) {
 
   "use strict";
 
@@ -27,10 +29,16 @@ Drupal.debounce = function (callback, wait) {
     var args = arguments;
     var later = function () {
       timeout = null;
-      result = callback.apply(context, args);
+      if (!immediate) {
+        result = func.apply(context, args);
+      }
     };
-    window.clearTimeout(timeout);
-    timeout = window.setTimeout(later, wait);
+    var callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) {
+      result = func.apply(context, args);
+    }
     return result;
   };
 };

core/misc/matchmedia.js

@@ -12,7 +12,7 @@
  * This polyfill triggers tests on window resize and orientationchange.
  */
 
-window.matchMedia = window.matchMedia || (function (doc, window) {
+window.matchMedia = window.matchMedia || (function (doc, window, Drupal) {
 
   "use strict";
 
@@ -79,7 +79,7 @@ window.matchMedia = window.matchMedia || (function (doc, window) {
             debounced.call(mql, mql);
           }
         };
-      }(this, debounce(callback, 250)));
+      }(this, Drupal.debounce(callback, 250)));
       this.listeners.push({
         'callback': callback,
         'handler': handler
@@ -120,32 +120,6 @@ window.matchMedia = window.matchMedia || (function (doc, window) {
     }
   };
 
-  /**
-   * Limits the invocations of a function in a given time frame.
-   *
-   * @param {Function} callback
-   *   The function to be invoked.
-   *
-   * @param {Number} wait
-   *   The time period within which the callback function should only be
-   *   invoked once. For example if the wait period is 250ms, then the callback
-   *   will only be called at most 4 times per second.
-   */
-  function debounce (callback, wait) {
-    var timeout, result;
-    return function () {
-      var context = this;
-      var args = arguments;
-      var later = function () {
-        timeout = null;
-        result = callback.apply(context, args);
-      };
-      window.clearTimeout(timeout);
-      timeout = window.setTimeout(later, wait);
-      return result;
-    };
-  }
-
   /**
    * Return a MediaQueryList.
    *
@@ -157,4 +131,4 @@ window.matchMedia = window.matchMedia || (function (doc, window) {
     // Build a new MediaQueryList object with the result of the check.
     return new MediaQueryList(q);
   };
-}(document, window));
+}(document, window, Drupal));

core/modules/system/system.module

@@ -1538,6 +1538,9 @@ function system_library_info() {
     'js' => array(
       'core/misc/matchmedia.js' => array(),
     ),
+    'dependencies' => array(
+      array('system', 'drupal.debounce'),
+    ),
   );
 
   // Farbtastic.