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

Source: Internet
Author: User
Tags setinterval

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.