如果我滚动查看如何使一个请求延迟加载,则多个请求都会传给ajax

问题描述

如果我尝试通过滚动多个请求后调用Ajax,而要使用同一ajax,该如何解决呢?

$(window).scroll(function(){
    var element = $('.MainChatList');
    var scrolled = false;
    if (element.scrollTop() + element.innerHeight() >=  element[0].scrollHeight)
    {
        if(!scrolled){
        scrolled = true;
        var scroll = 'scroll';
        loadMain(null,scroll);
        scrolled = false;
        }
     }
});

loadMain Ajax()

$.ajax({
    type : 'POST',url : 'process.PHP',data : { request : "LoadMainView",limit:limit,scroll:scroll }
}).done(function( data ) {
    $(".AdminMainViewLoader").hide();
    if(data)
    {
        var obj = JSON.parse(data);
        var html_content = obj.html_content;
        var scr = obj.scroll;
        var data_type = obj.data_type;
        if(scr == 'scroll')
        {
            console.log(scr);
            $(".MainChatList tbody").append(html_content);
        }
        else
            $("#MainView .MainChatData .main-two").html(html_content);
    });

这里是接收多个请求的ajax请求

解决方法

// taking a flag
isRequested=false;

// Now checking if not requested
if(!isRequested){
    $.ajax({
    type : 'POST',url : 'process.php',data : { request : "LoadMainView",limit:limit,scroll:scroll }
    beforeSend:function(xhr){
      // here we are setting isRequested to true
      isRequested=true;
    }
    }).done(function( data ) {
    $(".AdminMainViewLoader").hide();
    if(data)
    {
        
        var obj = JSON.parse(data);
        var html_content = obj.html_content;
        var scr = obj.scroll;
        var data_type = obj.data_type;
        if(scr == 'scroll')
        {
            console.log(scr);
            $(".MainChatList tbody").append(html_content);
        }
        else
            $("#MainView .MainChatData .main-two").html(html_content);
       // here we are setting isRequested to false
       isRequested=false;
    });
}