限制/延迟或其他优化以避免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