JS throttle function and JS to prevent repeated submission of n methods

Application Scenarios

Classic Use scenario: JS Some of the events, such as: onresize, scroll, MouseMove, mousehover, etc.;

Also such as: hand shaking, hand mistake, the server did not respond to the repeated click;

These are meaningless, repetitive invalid operations, setting the impact on the entire system can also be fatal, so we have to deal with the repeated click of the event accordingly!

Throttle function

The so-called throttle function, as the name implies, is a time limit function of repeated calls.

The same throttle function is also used to solve the problem of repeating the function, and the method of preventing repetition is not only an implementation of throttling function.

Method Summary

This article has organized my work in the practice, feel the prevention of JS repeated submission, a more useful way to share with you here.

One, SetTimeout + cleartimeout (throttle function)

This paper provides two kinds of implementation methods: Common throttling function and closure throttle function

Second, set FLAG/JS and lock

Third, through the Disable

Iv. adding floating layers such as loading layers to prevent multiple clicks

Specific Implementation

One, SetTimeout + cleartimeout (throttle function)

Mode one: Closure throttle function (multiple parameters can be passed)

/** * Closed Packet throttle function method (can be passed parameters) * @param function fn delay call functions * @param number delay delay how long * @return Function deferred method of execution*/varThrottle =function(FN, delay) {varTimer =NULL; return function () {        varargs = arguments;//Parameter Collectioncleartimeout (timer); Timer= SetTimeout (function() {fn.apply ( This, args);    }, delay); }}/** * The method to be executed * @param parameters passed by String name*/functionPostfun (name) {Document.writeln ("Name:" +name);}//================ Test part = "1s repeated click 10 times"varT = Throttle (Postfun, 1000);varEjector = setinterval (() ={T ("Tiger");}, 100); SetTimeout (()={clearinterval (ejector);},1000);

Execution Result:

Mode two: Common throttling function method

/** * Normal throttling function method * @param function fn delay call functions * @param number delay how long*/functionThrottle (FN, delay) {if(fn._id) {cleartimeout (fn._id); } fn._id= Window.settimeout (() ={fn (); fn._id=NULL; }, delay);}/** * The method to be executed*/functionPostfun () {Document.writeln (NewDate (). GetTime ());}//================ Test part = "1s repeated click 10 times"varInterval = SetInterval (() ={throttle (Postfun,1000);}, 100); SetTimeout (()={clearinterval (interval);},1000);

Execution Result:

Second, set FLAG/JS and lock

var false ; jQuery (function  () {    if  (lock) {        returnfalse ;    }     function (response) {        //TODO: Business code        false;    });});

Summarize

The first two methods are more convenient to implement, the latter two are relatively cumbersome to implement, it is recommended to use the throttling function of closures to deal with the problem of repeated submissions.

JS throttle function and JS to prevent repeated submission of n methods