Question

我正在试图找出防止多次调用ajax的方法。以下是我的代码。我创建了一个可滚动的div，我的目标是，一旦这个div内的滚动即将到达底部，我想调用ajax。到目前为止一切都有效。但问题是，每当我将div快速滚动到底部时，就会多次调用ajax。

$('.scroll_div').scroll(function(){

    var scroll_pos = $(this).scrollTop();
    var outer_height = $(this).height();
    var inner_height = $(this)[0].scrollHeight;
    var scroll_end = scroll_pos + outer_height;

    if(scroll_end >= inner_height-300){

        $.ajax({
                type: 'POST',
                url: 'ajax/get_info.php',
                data: {data_type: data_type},
                beforeSend:function(){

                }
        }).done(function(data){
                alert(data);
        });
    }

});

Answer 1

我会在它上面放一个计时器 - 相应地调整超时，这样只有当用户停留一两秒时，ajax才会触发：

$('.scroll_div').scroll(function(){
    if(typeof(myTimer)!='undefined'){
        clearTimeout(myTimer);
    }

var scroll_pos = $(this).scrollTop();
var outer_height = $(this).height();
var inner_height = $(this)[0].scrollHeight;
var scroll_end = scroll_pos + outer_height;

if(scroll_end >= inner_height-300){
        //timer
  myTimer = window.setTimeout(function(){
   $.ajax({
     type: 'POST',
     url: 'ajax/get_info.php',
     data: {data_type: data_type},
     beforeSend:function(){}
      }).done(function(data){
            alert(data);
    });      
 }, 2500);

}

}）;

防止多次调用ajax

1 个答案: