Forms Prevent Duplicate submissions

Let's start by introducing two and simple methods:
1. Disable Submit button

$("#submit_button").attr("disabled",true);

1. To set the lock flag:

var  lock = true ; var  vvv =  ' Vvvvalue ' ; function  clickButton   ()  { if  (lock) {lock = false ; $.ajax ({url: "2.php" , Type: "POST" , data:  "vvv="  +vvv, Success:function   { console.log (data);             Lock = true ;   }        }); }}

The following complete introduction refers to the
Links: http://www.zhihu.com/question/19805411
It is not recommended to use an external variable to lock or modify the state of a button, because that is more difficult:

* 要考虑并理解 success, complete, error, timeout 这些事件的区别，并注册正确的事件，一旦失误，功能将不再可用；* 不可避免地比普通流程要要多注册一个 complete 事件；* 恢复状态的代码很容易和不相干的代码混合在一起；

I recommend using active query states (A, b,jquery, for example) or tool functions (C, D) to remove duplicates and provide some examples for reference:

A. Exclusive Submissions
Only one commit operation is allowed at a time, and the next commit cannot be made until this commit is complete.

function() {     if (this‘pending‘return }     returnthis.promise_ = $.post(‘/api/save‘)    }

B. Greedy type Submission
Unlimited commits, but whichever is the last one, i.e. the feedback from the last operation needs to be given as soon as possible, and the result of the previous operation is not important.

function() {  if (this‘pending‘) {    this.promise_.abort()  }  // todo}

For example, in some applications, there are two-state buttons that do something like "like" or "dislike". If not immediately after pressing the feedback, the user's focus on the button may pause for a long time, if you press the status of the instant Switch button, and then the program with abort to achieve positive submissions, which can improve the user experience, but also reduce the server pressure, happy.

C. Moderation Submission
No matter how frequently the submission occurs, the interval between any two valid commits must be greater than or equal to a certain time interval, i.e. submitted at a certain frequency.

module.submit = throttle(150function() {  // todo})

If the customer sends 10 requests every 100 milliseconds, the module will only receive 6 of them (each on the timeline is 150 milliseconds away) for processing.
This is also an optional way to resolve query conflicts, for example, in the light of the draft example, careful observation can be found:
The Blur event of the editor triggers the save immediately;
The Click event of the Save button will also trigger the save immediately;
But there is a situation where the two events occur consecutively in a matter of milliseconds-when the focus is inside the editor and the Save button is clicked directly-it is possible to use throttle to handle it.
There are also some event handlers that use throttle frequently, such as: resize, scroll, MouseMove.

D. Lazy Type Submission
The interval between any two commits must be greater than a specified time to contribute to a valid submission, i.e. no rest or work.

module.submit = debounce(150function() {  // todo})

Or to know the draft example, when you press CTRL + S in the editor, you can save the draft manually; If you double-click, the program will not understand why you have to double-click, it will continue until you give up the double-click.

============
More examples of memory

The way C and the way D are sometimes more generic, such as these conditions:

* 游戏中你捡到一把威力强大的高速武器，为了防止你的子弹在屏幕上打成一条直线，可以 throttle 来控制频率；* 在弹幕型游戏里，为了防止你把射击键夹住来进行无脑游戏，可以用 debounce 来控制频率；* 在编译任务里，守护进程监视了某一文件夹里所有的文件（如任一文件的改变都可以触发重新编译，一次执行就需要2秒），但某种操作能够瞬间造成大量文件改变（如 git checkout），这时一个简单的 debounce 可以使编译任务只执行一次。

and mode C can even be used in combination with the way B, such as auto-complete components (Google home search is):

* 当用户快速输入文本时（特别是打字能手），可以 throttle keypress 事件处理函数，以指定时间间隔来提取文本域的值，然后立即进行新的查询；* 当新的查询需要发送，但上一个查询还没返回结果时，可以 abort 未完成的查询，并立即发送新查询；

E. Memory Type

var scrape = memoize(function(url) {  return $.post(‘/scraper‘‘url‘: url })})

For the same argument, its return always results in an identity-the same object is returned each time.
The application example has an editor, such as the paste content when the link information is crawled, memoize to ensure that the same link will not be crawled two times.

F. Cumulative type
This function was obtained the day before when the auto-complete event was processed, and the discovery could also be used to process continuous events, which could combine successive commits into a single commit, such as:

var request = makePile(5function() {    $.post(‘/‘JSON.stringify([].slice.call(arguments)) })})// 连续发送五次 request({a:1}), request({a:2}), request({a:3}), request({a:4}), request({a:5})/* post =>list:[{"a":1},{"a":2},{"a":3},{"a":4},{"a":5}] */

Example implementation:

var  makepile = function   (count, OnFilter, Onvalue)  { var  values = [], id = function   (value)  { return  value} return  function   (value)  { Values.push (Onvalue | | id). APPLY (this ,  Arguments ) if  (values.length = = = count) {onfilter.apply (this , values) values = []}}}  

Another accumulation is by time, not the number of times, such as the application of behavioral statistics, may be collected in an instant dozens of hundreds of similar behavior, you can use the above pile structure plus debounce to prevent a large number of repeated requests (but do not lose any statistics):

varTrackfactory = function(delay, action) { varparams = [], slice = [].slicevarTouch = debounce (delay, function() { if(params.length) {action (params) params = []}})return  function() {Params.push (Slice.call (arguments)) Touch ()}}varTrack = Trackfactory (550, function(params) { //Send Tracking request})

G. Sample Type
This is a recent refactoring thought, a different from the above to redo the operation can be applied to the automatic loading (timeline) behavior control:

‘next‘, sample(3function() {this.enable() }))

If sample is a cured selection function (n selected 1), it will actually work like this:
O-o-x-o-o-x

But the "Auto-load" app may want to be (two times automatic, one time manually):
X-x-o-x-x-o

For this scenario, you can define a selection function as a configuration to implement the control:
Options {sample: (n) = = n% 3!== 0}

That is, each time the next load is completed, the next load is automatically loaded two times every three times.

Copyright NOTICE: Reprint Please specify source: HTTP://BLOG.CSDN.NET/M0SH1

Forms Prevent Duplicate submissions