Working on the World of Raids Recruitment Tool we wanted automatic saving while editing. There are basically two ways of handling the problem.
- Send update everytime something changes. The main advantage of this technique is that you are always up to date. However, it is spamming the server on fields that are constantly being updated (text fields for example).
- Send update every X seconds. There is no longer query spike but there are two main disadvantages.
The delay the data are sent after a modification can vary from nothing to the timer length for no apparent reason. This is a really bad feeling for the user. He will think that the application is buggy.
The application is going to send queries all the time, even if there are no changes. We can safely assume that people are interacting a lot less than viewing so this is a real waste of resources.
We are interested in the first one, we want instant update but removing the ability to send too much data at once. What we want is to send data right after the user is done typing instead of everytime a character is typed. There is an easy way to do it in Javascript.
When you type the first character, it will start a timer of let say 100ms. Then everytime you type another character it resets the timer to 100ms. When it triggers, it will send data to the server.
This way, data will only be sent when the user interacts and with no risk of spamming the server.
var Object = { /* Object Code ... */ timer: null, sendChanges: function() { if (this.timer) { clearTimeout(timer); this.timer = null; } this.timer = setTimeout( function () { /* Send Changes */ }, 200 /* Timeout in ms */ ); } }; |
