防止JQuery触发多个AJAX GET请求

Question

I have this function

 function () {
     if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * 0.7) {
         //$(window).unbind('scroll');

         jQuery.get('moreProfileComments', function (e, success) {
             $(window).scroll(scrollEvent);
             console.log(e);
             var result_div = $(e).find('#user_comments #u_cont div');
             var original_div = $('#user_comments #u_cont div');

             if (result_div.last().html() === original_div.last().html()) {
                 //alert("TEST");
                 //$(window).unbind('scroll');
             } else {
                 //$(rs).appendTo('#search_results').fadeIn('slow');
                 $('#user_comments #u_cont').append($(e).find('#user_comments #u_cont').html());
                 $(window).scroll(scrollEvent);
             }
         }, "html");

     }
 };

that makes an ajax request, how do I make sure it would only fire 1 ajax request? if a request has been already or sent. I do not want multiple ajax request.

Answer 1

scroll event like the resize event fires hundred times( depends on the browser ), you should use a plugin that provides a throttle method like underscore.js or you can use setTimeout function.

An underscore.js throttle example:

var throttled = _.throttle(scrollEvent, 500);
$(window).scroll(throttled);

An example using setTimeout function:

var timeout = '';
$(window).on('scroll', function(){
    clearTimeout(timeout);
    timeout = setTimeout(function(){
       // Do something here
    }, 300); 
})

A related article by John Resig: http://ejohn.org/blog/learning-from-twitter/

Answer 2

It is good idea to use throttled versions of event handlers for resize and scroll events. But to address your specific problem with making multiple request you can use the following code.

 var requestIsRunning; //Flag to indicate that there is a pending request.

 function () {
     if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * 0.7) {

         //do nothing if there is an active moreProfileComments request;
         if(ruquestIsRunning) {return;};

         requestIsRunning = 1;
         jQuery.get('moreProfileComments', function (e, success) {
             $(window).scroll(scrollEvent);
             console.log(e);
             var result_div = $(e).find('#user_comments #u_cont div');
             var original_div = $('#user_comments #u_cont div');

             if (result_div.last().html() === original_div.last().html()) {
                 //alert("TEST");
                 //$(window).unbind('scroll');
             } else {
                 //$(rs).appendTo('#search_results').fadeIn('slow');
                 $('#user_comments #u_cont').append($(e).find('#user_comments #u_cont').html());
                 $(window).scroll(scrollEvent);
             }
         }, "html")
         //when request is complete restore the flag
         .always(function(){ 
              requestIsRunning = 0;
          });

     }
 };