mediawiki.util: Add debounce() function

Bug: T213426
Change-Id: If370b959b2617d0f506ac3ed344af8c6a667e70d

diff --git a/resources/Resources.php b/resources/Resources.php
index 8077022..0960e83 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -940,6 +940,9 @@ return [
                'scripts' => [
                        'resources/src/mediawiki.htmlform.checker.js',
                ],
+               'dependencies' => [
+                       'mediawiki.util',
+               ],
                'targets' => [ 'desktop', 'mobile' ],
        ],
        'mediawiki.htmlform.ooui' => [

diff --git a/resources/src/mediawiki.htmlform.checker.js b/resources/src/mediawiki.htmlform.checker.js
index 33207d4..473635a 100644 (file)
--- a/resources/src/mediawiki.htmlform.checker.js
+++ b/resources/src/mediawiki.htmlform.checker.js
@@ -3,14 +3,6 @@
        // FIXME: mw.htmlform.Element also sets this to empty object
        mw.htmlform = {};
 
-       function debounce( delay, callback ) {
-               var timeout;
-               return function () {
-                       clearTimeout( timeout );
-                       timeout = setTimeout( Function.prototype.apply.bind( callback, this, arguments ), delay );
-               };
-       }
-
        /**
         * @class mw.htmlform.Checker
         */
@@ -60,7 +52,7 @@
                if ( $extraElements ) {
                        $e = $e.add( $extraElements );
                }
-               $e.on( events, debounce( 1000, this.validate.bind( this ) ) );
+               $e.on( events, mw.util.debounce( 1000, this.validate.bind( this ) ) );
 
                return this;
        };

diff --git a/resources/src/mediawiki.util/util.js b/resources/src/mediawiki.util/util.js
index 57843cb..8521664 100644 (file)
--- a/resources/src/mediawiki.util/util.js
+++ b/resources/src/mediawiki.util/util.js
@@ -83,6 +83,27 @@ util = {
                return escapeIdInternal( str, config.FragmentMode[ 0 ] );
        },
 
+       /**
+        * Return a wrapper function that is debounced for the given duration.
+        *
+        * When it is first called, a timeout is scheduled. If before the timer
+        * is reached the wrapper is called again, it gets rescheduled for the
+        * same duration from now until it stops being called. The original function
+        * is called from the "tail" of such chain, with the last set of arguments.
+        *
+        * @since 1.34
+        * @param {number} delay Time in milliseconds
+        * @param {Function} callback
+        * @return {Function}
+        */
+       debounce: function ( delay, callback ) {
+               var timeout;
+               return function () {
+                       clearTimeout( timeout );
+                       timeout = setTimeout( Function.prototype.apply.bind( callback, this, arguments ), delay );
+               };
+       },
+
        /**
         * Encode page titles for use in a URL
         *

diff --git a/tests/qunit/suites/resources/mediawiki/mediawiki.util.test.js b/tests/qunit/suites/resources/mediawiki/mediawiki.util.test.js
index 4f61abd..a05b50b 100644 (file)
--- a/tests/qunit/suites/resources/mediawiki/mediawiki.util.test.js
+++ b/tests/qunit/suites/resources/mediawiki/mediawiki.util.test.js
@@ -474,4 +474,27 @@
 
                assert.strictEqual( mw.util.escapeRegExp( normal ), normal, 'Alphanumerals are left alone' );
        } );
+
+       QUnit.test( 'debounce', function ( assert ) {
+               var fn,
+                       q = [],
+                       done = assert.async();
+
+               fn = mw.util.debounce( 0, function ( data ) {
+                       q.push( data );
+               } );
+
+               fn( 1 );
+               fn( 2 );
+               fn( 3 );
+
+               setTimeout( function () {
+                       assert.deepEqual(
+                               q,
+                               [ 3 ],
+                               'Last one ran'
+                       );
+                       done();
+               } );
+       } );
 }() );