首页 > 解决方案 > 如果我滚动如何使其成为延迟加载的一个请求,则多个请求将成为 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请求

标签: javascriptjqueryajaxlazy-loading

解决方案


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

推荐阅读