JavaScript debounce prevents users from repeatedly submitting

Cases.

The page has a button, click at a time can trigger an AJAX request. Without special processing, a large number of Ajax requests are triggered by a user's Quick click, which creates an unnecessary burden on the server.

There are several ways to handle this:

Disable button after clicking

The code is as follows

Copy Code

Login function Login (Usernameid,pwdid,codeid) { SUSPENDBTN (btnsubmit); $.ajax ({ URL: '/admin/webservice1.asmx/login ', Type: ' POST ', DataType: "xml", ContentType: "Application/x-www-form-urlencoded;charset=utf-8", Data:{username:username.value,strpwd:pwd.value}, Success:function (msg) { if (msg.text== "false") { Alert ("Please fill in the correct username password!") "); Username.select (); }else{ Openwindow ("default.aspx", true); } }, Error:function (x, E) { alert (X.responsetext); }}); RESUMEBTN (btnsubmit); } Suspend button function Suspendbtn (BTN) { btn.disabled= "Disabled"; Btn.value= "being logged in"; } Restore button function Resumebtn (BTN) { Btn.disabled= ""; Btn.value= "Submit"; }

This is a relatively simple and crude way to disable the button after the user first triggers the Click event – Set the Disabled property to true. After you finish processing the Ajax request, decide whether to enable the button as appropriate.

Debounce

On the wiki debounce is translated into the removal of shaking? India N Yi Qiang shoot garden extension not а regret 髟 Netherfield silly thumb to record? – The signal that triggers the event handler is in an unstable state.

The principle of the Debounce method is that when the first event is triggered, the event function that it binds to performs a certain delay (settimeout), such as 100 milliseconds, if the event is not triggered in 100 milliseconds, we can assume that the information is stable and the event handler will be in the expected 100 milliseconds "of course, This time is not accurate and you are interested to see a description of JavaScript asynchrony, but if the same event is triggered within 100 milliseconds, the previous delay is cleared (cleartimeout) and the new delay (settimeout) is replaced.

Thus, if the user keeps clicking on the button and the two-click interval is less than 100 milliseconds, the Click event is continuously triggered, and the new delay continues to replace the old delay, with the result that the event handler function is not executed.

Give an example of a click button to submit an Ajax request 1:

The code is as follows	Copy Code
$ (' #fav '). On (' click ', function () { var timer = null; return function () { Cleartimeout (timer);/Purge last deferred event on each execution Timer = settimeout (function () {//Set new latency Event $.ajax ({...}); }, 100); } });

One obvious flaw in this approach is that the handling of events is also postponed to 100 milliseconds without exception when the user clicks normally.
Throttle

The definition of throttle is:

A device controlling the flow of fuel or power to a engine.

Here, we can simply understand the mechanism of the frequency of a control function 2.

Unlike Debounce, the throttle method does not delay the handling of the first event. It handles the first event immediately, records the time, and then the event occurs, and it calculates a time value that indicates how long it was before the first event occurred, and if the time value is less than the set time valve (threshold), then use SetTimeout to postpone event handling, Once the time valve is reached, event handling is triggered immediately.

In this way, throttle controls the frequency at which the event handlers can be triggered by intensive events, such as triggering only one event function per 200 seconds (threshold). See examples of scroll and resize events in extended reading 3 for specific applications.