This is something new for me , so thought – something like this might be a news for some of the crowd. And I was immensely helped by this concept, so sharing.
Jumping off the context a little – I still remember the first time I heard of ‘Ajax’. It was an job interview, where after I did reasonably well on the Java quizzing, I was asked – ‘What do you know about Ajax?’, and I made an honest admission that I have never heard about it. Well, after the interview, I came back and did a google on ‘Ajax’, and I realized – oh well it’s a football club from Amsterdam. But why the hell was that being asked in a programming interview? :-) .I went on to next results .. and came to learn about the JS Ajax(the one which would be of more value/interest to me in the coming years !!).
Back on to the debounce and throttle needs when making Ajax requests. How much Ajax has been used since it’s inception needs no enlightening. What has been my learning lately though, has been a case of an unnecessary overuse of Ajax, and the tricks which can be used to avoid this misuse.
The use case involves any repeating user Behavior acting as a trigger for a server side request made via Ajax from the UI – (Some examples that I could think of)
- on each keypress you need to update and display a list of words (which come from and Ajax request), Think an autocomplete example based on server side data.
- on each drag of the scrollbar of an endless-scrolling application page you need to get results from the server, corresponding to the area/page to which the scrollbar is being dragged. See virtual scrolling examples here . Remember Twitter/Facebook/LinkedIn UI and you got it.
- On each mouse move event you need to display the current position of the cursor and use it in an Ajax request. Think of a GIS application using latitude/longitude data corresponding to cursor coordinates.
But effectively the solution is to tell the browser in someway that – “Please treat the last activity made in a period of ‘n’ duration as the final one, and fire an event for this last activity only(ignoring the earlier ones)”. This technique is termed as debouncing.
A probable alternative solution could be throttling – to limit the execution time of the function on the event(triggered by user activity) by providing a duration limit( in miliseconds) . This approach again may or may not solve the problem you have at hand (depending on the use case). For example for a toggling of a flag var state, this might not be useful, and debouncing will be required.
While the description may go all over your head( :( I’m not good at explaining), the implementation of these is pretty simple. Thanks to jQuery plugin by “Cowboy” Ben Alman . A five minute read would be more than enough for implementing the required and getting your next month’s pay-cheque from your supervisor instead of a nasty stare.
The examples at the shared link (again courtsey Ben Alman) demonstracte just how helpful this concept could be. How hardly you might be hit in abscence of this fix, will depend on what happens in those Ajax requests, How time consuming they are ?, Do they modify concerned state also ? etc. factors.
Apparantly, the multi-utility library – ‘underscore.js’ also provides the similar functionality. See here.