Prevent repeated sending of Ajax requests

To consider and understand the differences between success, complete, error and timeout events, and register the correct events, 1 error, the function will no longer be available;

Inevitably, it is necessary to register one more complete event than the normal process;

The code for restoring state can easily be mixed with irrelevant code in one case;

It is recommended to use active query status (A, B, jQuery for example) or tool function (C, D) to eliminate repeated operations, and provide some examples for reference:

A. Exclusive commit

Only one commit operation is allowed at the same time, and the next commit cannot be made until this commit is completed.

module.submit = function() {
 if (this.promise_.state() === 'pending') {
 return
 }
 return this.promise_ = $.post('/api/save')
}

B. Greedy commit

Unlimited submission, but subject to the last operation; That is to say, the feedback of the last operation needs to be given as soon as possible, and the results of the previous operation are not important.

module.submit = function() {
 if (this.promise_.state() === 'pending') {
 this.promise_.abort()
 }
 // todo
}

For example, in the entries of some applications, there are 1 2-state buttons that perform similar "like" or "dislike" operations. If you don't give feedback immediately after pressing it, the user's eye focus may pause on that button for a long time; If you switch the state of the button immediately when you press it, and then use abort to realize active submission in the program, it can not only improve the user experience, but also reduce the pressure on the server, and everyone is happy.

C. Controlled submission

No matter how frequent submissions are, the interval between any two valid submissions must be greater than or equal to a certain time interval; That is, it is submitted at a fixed frequency of 1.

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

If the client sends 10 requests every 100 milliseconds, the module will receive only 6 of them (each 150 milliseconds on the timeline) for processing.

This is also a contestant section to solve query conflicts. For example, taking Zhihu draft as an example, careful observation can find that:

The blur event of the editor triggers the save immediately;

The click event of the save button will also trigger the save immediately;

However, there is a situation where these two events occur continuously for milliseconds-when the focus is inside the editor and you click the Save button directly-it is feasible to handle them with throttle.

There are other event handlers that use throttle very frequently, such as resize, scroll, and mousemove.

D. Lazy commit

The interval between any two submissions must be greater than 1 specified time to make a valid submission; That is, no rest or work.

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

Take the Zhihu draft as an example. When you press ctrl + s in the editor, you can save the draft manually; If you re-click, the program says it doesn't understand why you re-click, and it won't continue until you give up re-clicking.

============

More examples from memory

Mode C and Mode D are sometimes more common, such as these cases:

In the game you pick up a powerful high-speed weapon, in order to prevent your bullets in a straight line on the screen, you can throttle to control the frequency;

In the barrage game, in order to prevent you from clamping the shooting keys to play mindless games, you can use debounce to control the frequency;

In the compilation task, the daemon monitors all the files in a 1 folder (for example, the change of any 1 file can trigger recompilation, and it takes 2 seconds to execute once), but some operation can instantly cause a large number of file changes (such as git checkout), so a simple debounce can make the compilation task only execute once.

The mode C can even be combined with the mode B, such as the auto-complete component (the search on the homepage of Google is):

When users enter text quickly (especially typing experts), throttle keypress event handler can extract the value of text field at specified time interval, and then make a new query immediately;

When a new query needs to be sent, but the last query has not returned the result, you can abort the unfinished query and send the new query immediately;