限制/延迟或其他优化以避免jQuery请求的停顿/错误500

Question

I have a page that is updated using jQuery according to a few actions that a user can carry out.

I've noticed that requests can stall or the server simply gives an 500 error. This could be an indication that too many requests are taking place simultaneously.

The following actions can take place:

• User hits rating button for an image, jQuery updates the new rating.
• User hits next button, jQuery fetches the description in JSON of a new random image, jQuery updates a few html attributes to show the new image.
• User activates the scrollbar of an infinite scrolling gallery, jQuery monitors the position of the last image and fetches the description of a new random image each time a limit is reached.
• User clicks a thumbnail, jQuery updates the attributes to show a full size image.
• User enters text in a field to post a comment, hits button, jQuery updates the database.
• User hits favourite button, jQuery updates database with the user's favourites.
• Adding to this, url rewriting to redirect image requests to an image-resizing script which takes the original image and resizes it according to a maximum height/width and then caches it in a directory.

One of the things that can happen is that a user can press the next button repeatedly or they action the scroller continously. This in turn can cause a lot of requests to "pile up".

What could I do to delay actions (disable buttons? add a minimal interval between requests? ...) and what other forms of optimizations could be used?

Answer 1

First of all, you can fetch not only next image, but lets say 10 images in one request. When the user is repeatedly clicking next, do not fire request on each next. Fire request with setTimeout() of 0.5 seconds, clearing previous timeout. You may log how many times the 'next' was clicked in order to retrieve the correct number of images. For the rating, favourite and comment, the logic is perfectly valid, so you should only ensure that those operations on the server side are as fast as possible.

User activates the scrollbar of an infinite scrolling gallery, jQuery monitors the position of the last image and fetches the description of a new random image each time a limit is reached.

Once again, do not fetch them 1 by one, fetch them in groups

Answer 2

You'll want to check this jQuery plugin that throttles - debounces events:

http://benalman.com/projects/jquery-throttle-debounce-plugin/

The idea behind this and behind your needs is caching the user request, and waiting a bit to see if the user changes his mind or ask for more, and then converting all those requests in ONE ajax call.

You could also cache non-live user requests, and commit them only once in a while. Example:

• second 0 - User hit "favourite"
• second 30 - User posts a comment
• second 100 - your script takes all requests and send them to the server.

Another thing: you'll probably want to have a look at your server code. maybe make use of optimizing stuff like gzipping http requests, using memcached to lighten your database load and response time, etc.