Js is used in the project. jquery is the first choice, and libraries can be used.
If you encounter a repeated submission problem, disable it. Baidu google, or Google.
Zhihu has an expert who summarized four methods. It is better to use the Jquery. post method to return the jqXHR object and call State () to determine the status. It should be noted that more than 1.5 of them are supported. I started with 1.9. In the past, 1.4 was useless, and 1.4 returned xhttprequest.
Directly turn to articles, and your own code is not as good as others.
Http://www.zhihu.com/question/19805411
The cloud of Changtian,
Head, body {content: 'hungry '}11 votes, from guozuo, zhihu, and Yang Dingjian of steel, we do not recommend using external variables to lock or modify the button status, because it is difficult:
Consider and understand the differences between suceess, compelete, error, and timeout events, and register the correct events. The functions will no longer be available if the errors occur;
It is inevitable that a compelete event should be registered more than a common process;
The restored code is easily mixed with irrelevant code;
I recommend that you use the method of actively querying the status (A, B, jQuery for example) or the method of tool functions (C, D) to remove repeated operations, and provide some examples for reference:
A. Exclusive
Type
Submit
Only one submission operation can exist at the same time, and the next submission can be performed only after this submission is complete. Module. submit = function () {if (this. promise _ & this. promise _. state () = 'Pending') {return} returnthis. promise _ = $. post ('/api/save ')}
B. Greedy
Type
Submit
Unlimited submission, but the last operation shall prevail; that is, feedback on the last operation should be provided as soon as possible, and the previous operation results are not important.
Module. submit = function () {if (this. promise _ & this. promise _. state () = 'Pending') {this. promise _. abort ()} // todo}. For example, some application entries have two-state buttons that perform operations similar to "like" or "dislike. If you do not give feedback immediately after you press the button, the user's focus may pause for a long time on that button. If you switch the button status when you press the button, then we can use abort in the program to implement positive submission, which not only improves the user experience, but also reduces the pressure on the server.
C. Controlled submission
Regardless of the submission frequency, the interval between any two valid submissions must be greater than or equal to a certain interval. Module. submit = throttle (150, function () {// todo}) if the customer sends 10 requests every 100 milliseconds, this module will only process six of them (each 150 milliseconds in time line.
This is also an optional means to solve query conflicts. For example, taking zhihu draft as an example, we can find that:
The editor's blur event will immediately trigger saving;
The click event of the Save button also triggers the Save immediately;
However, there is a situation where these two events occur consecutively within several milliseconds-when the focus is inside the editor and you directly click the Save button-throttle is feasible for processing.
In addition, throttle is frequently used for event processing, such as resize, scroll, and mousemove.
D. laziness
Type
Submit
The interval between any two submissions must be greater than a specified time to facilitate the effective submission. Module. submit = debounce (150, function () {// todo}) is still an example of zhihu draft. When pressing ctrl + s in the editor, you can manually Save the draft; if you press, the program will not understand why you need to press. It will continue only when you give up the press.
================
More examples in memory
Methods C and D are sometimes more common, for example:
In the game, you find a powerful high-speed weapon. To prevent your bullets from hitting a straight line on the screen, throttle can be used to control the frequency;
In bullet screen games, debounce can be used to control the frequency to prevent you from holding the shooting key for brainless games;
In a compilation task, the daemon monitors all the files in a folder (for example, any file changes can trigger re-compilation, which takes 2 seconds for one execution ), however, some operations can instantly cause a large number of file changes (such as git checkout). In this case, a simple debounce can only execute the compilation task once.
Method C can even be used in combination with method B, for example, to automatically complete components (Google homepage search is ):
When a user rapidly inputs text (especially a typist), he can throttle keypress event handler to extract the value of the text field at a specified time interval and then perform a new query immediately;
When a new query needs to be sent, but the previous query does not return results, you can abort the unfinished query and send the new query immediately;
----- Update 2013-01-08 -----
Memory type:
Varscrape = memoize (function (url) {return $. post ('/scraper', {'url': url}) for the same parameter, the return result is always a constant-the same object will be returned each time.
