Application scenarios
Classic usage scenarios: js events, such as: onresize, scroll, mousemove, mousehover and so on;
Also, for example: clicking repeatedly before the tremor, wrong hands, the server does not respond;
These are meaningless, repetitive invalid operation, set the impact on the entire system also can be fatal, so we have to repeat the events click the appropriate treatment!
Throttle function
The so-called throttling function name suggests, is a function of the time limit repeated calls.
Similarly throttle function is to solve the problem of duplicate submission function, while preventing duplicate submissions, more than one implementation throttling function.
Methods Summary
This paper finishing my work in practice, feel js prevent duplicate submission, relatively easy to use method, here and share with you.
A, setTimeout + clearTimeout (throttle function)
Provided herein are two implementations: Normal throttling function and a throttle function closures
Second, set the flag / js locking
Third, through the disable
Fourth, add a floating layer such as a layer to prevent loading multiple clicks
Implementation
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div style="width: 200px; height: 100px; background: red;" id="Test">hahaahahhah</div> </body> <script> //------------------------闭包节流函数------------------------ var throttle = function (fn, delay) { var timer = null; return function () { var args = arguments; //参数集合 clearTimeout(timer); timer = setTimeout(function () { fn.apply(this, args); }, delay); } } function postFun(name) { console.log(1) } var t = throttle(postFun, 1000); document.getElementById('Test').onclick = function(){ t(); } //------------------------普通节流函数------------------------ function throttle(fn, delay) { if (fn._id) { the clearTimeout (fn._id); } Fn._id = the window.setTimeout (() => { Fn (); fn._id = null ; }, Delay); } function postFun () { the console.log ( . 1 ) } document.getElementById ( ' the Test ' ) .onclick = function () { throttle (postFun, 1000 ); } // ------------------------ ---- simple throttling function method -------------------- var Timer = null ; document.getElementById('Test').onclick = function(){ if(!timer) clearTimeout(timer); timer = setTimeout(function(){ console.log(1) },1000) } //设定flag/js加锁 var lock = false; jQuery("#submit").on('click', function () { if (lock) { return false; } lock = true; jQuery.post(url, data, function (response) { //TODO:业务代码 lock = false; }); }); </script> </html>
Summary
implement two ways before more convenient, the latter two are relatively complicated to implement, if it is to prevent multiple triggering events, we recommend the use of closures, if the form is submitted, the moderate use of two more prudent.