1

我有这个功能

 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");

     }
 };

发出一个 ajax 请求，我如何确保它只会触发 1 个 ajax 请求？如果请求已经发送或发送。我不想要多个 ajax 请求。

4

2 回答 2

3

scroll事件resize触发一百次（取决于浏览器），您应该使用提供throttle类似underscore.js的方法的插件，或者您可以使用setTimeout函数。

underscore.jsthrottle示例：

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

setTimeout使用函数的示例：

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

John Resig 的相关文章：http: //ejohn.org/blog/learning-from-twitter/

于 2013-03-17T07:42:19.023 回答
2

resize对事件使用节流版本的事件处理程序是个好主意scroll。但是要解决您提出多个请求的具体问题，您可以使用以下代码。

 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;
          });

     }
 };
于 2013-03-20T10:49:13.707 回答