JavaScript function throttling (throttle) and function shake (debounce)

For changes in the size of the browser window, to dynamically change the size of the page elements, you can use the window resize event, the implementation of code:

<script type= "Text/javascript" >    var n = 0;     function Resizehandler () {        console.log(new  Date (). GetTime ());        Console.log (+ +N)    ;        } = Resizehandler; </script>

Functionality can be achieved, all when we drag and drop the size of the browser, the console will continue to print the execution of Resizehandler function results.

A simple drag will let the Resizehandler () function execute many times, the actual Resizehandler function in the display project can be very complex, and even involve the data interaction at the front and back end, so it is obviously unacceptable to perform a drag-and-drop execution many times.

function to shake

In fact, our intention is only the window resize after the page to do some adjustment, and window resize event is not at the end of the resize after the departure, the specific trigger frequency is not very clear, but it is constantly called, until the window size is not changed. Similar mechanisms and mouse mousemove, are repeated in a short period of time to trigger.

In JavaScript advanced programming, there is a function stabilization that is specifically designed to address this problem.

function Throttle (method, context) {    cleartimeout (method.tid);     = SetTimeout (function() {        method.call (context);     );}

The principle is very simple, using the timer, let the function execution delay 500 milliseconds, in 500 milliseconds if there is a function is called to delete the last call, this call is executed after 500 milliseconds, so back and forth. So the code can be changed to:

<script type= "Text/javascript" >    var n = 0;     function Resizehandler () {        console.log(new  Date (). GetTime ());        Console.log (+ +N)    ;        } function Throttle (method, context) {        cleartimeout (method.tid);         = SetTimeout (function() {           method.call (context);         );    }         function () {        throttle (resizehandler, window);    }; </script>

In that case, there is no problem with execution.

Another method of function stabilization

A pre-set execution period is performed when the call action is greater than or equal to the execution period, and then the next cycle is entered.

function Throttle (method, Dalay) {    varnull;     return function () {        varThis, args = arguments;        Cleartimeout (timer);         = SetTimeout (function() {            method.apply (context, args)        ,}, delay);}    }

Call to try, the same effect

<script type= "Text/javascript" >varn = 0; functionResizehandler () {Console.log (NewDate (). GetTime ()); Console.log (++N); }        functionthrottle (method, delay) {varTimer =NULL; return function(){            varContext = This, args =arguments;            Cleartimeout (timer); Timer= SetTimeout (function() {method.apply (context, args);        }, delay); }} window.onresize= Throttle (Resizehandler, 500);//This is because the function handle is returned without wrapping the function. </script>

Comparison

Both methods take advantage of settimeout, but the second method joins the function delay execution time, which in the first scenario is very easy to also have the function, nothing more than add a parameter.

But the first scenario saves the TID as a variable of the function, and the second creates the closure store. Personally feel that the gap is not small, like the first, simple, efficient.

New requirements

Baidu Home input automatic Prompt the same thing, I binding KeyUp event in text, each time the keyboard bounce automatically prompt, but do not want to prompt so frequently, so I used the above method, but the tragedy, only upright input and so on 500 milliseconds will prompt, in the input process there is no hint. Look at the code, no, only the user will be blind, in 500 milliseconds to click on the keyboard, prompting the function will be constantly delayed, so that only when the pause will be prompted, which makes no sense.

Is it possible to perform a fixed time interval on the basis of the function throttle?

function throttling

We searched the Internet. We can make some changes according to the second type (the first function expands multiple variables feel some bad), add a parameter as to the fixed interval must be executed.

functionthrottle (method, delay, duration) {varTimer =NULL, begin =NewDate (); return function(){        varContext = This, args = arguments, current =NewDate ();        Cleartimeout (timer); if(Current-begin >=duration)            {method.apply (context, args); Begin=Current ; } Else{Timer= SetTimeout (function() {method.apply (context, args);        }, delay); }    }}

So every time we judge the interval is long enough, if more than the set time to execute immediately, with the example of just try the effect

Window.onresize = Throttle (Resizehandler, 100, 200);

In this way, there is neither frequent execution nor final execution.

Summarize

For the function throttle in the dynamic response to the user's behavior has a greater use of frequency, the use of the basic version of the function of the throttle or change version of the business scenario to be based on the specific analysis.

Both throttle and debounce are ways to improve the performance of event handlers by reducing the execution of actual logic processing, and do not substantially reduce the number of triggering events. Escape

JavaScript function throttling (throttle) and function shake (debounce)