移动端： 滑动到页面底部触发ajax. PC上触发正常。移动端上多次触发，怎么回事

Question

//javascript

$(function(){

    waitAajxDataLoad();

    getMoreModelList();

});


function getMoreModelList(){
    var page = 1;
    var flag = true;
  
    loadModeList();

    $(window).scroll(function(){
       scrollFn();
    });


    function scrollFn(){
        var documentHeight = $(document).height();
        var windowHeight = parseInt($(this).height());
        var windowScrollTop = parseInt($(this).scrollTop());

        if(documentHeight <= windowHeight){
            return false;
        }
        
        if(windowHeight + windowScrollTop >= documentHeight){
            if(flag === true){
                loadModeList();
            }
        }
    }

    
    function loadModeList(){
        var loading = $(".js-model-list");
        var url = getScriptObj(".js-be-api").getMoreCarModel;
        var modelWrap = $(".js-model-list");
        var html = "";

        $(window).unbind('scroll');

        $.ajax({
            // async: false,
            url: url,
            type: "POST",
            dataType: "JSON",
            data: {
                page: page
            }
        }).done(function(data){
           
            $(window).scroll(function(){
               scrollFn();
            });

            if(data.status === 0){
                html = renderTemplate(data);
                modelWrap.append(html);
                page++;

            }else if(data.status === 3){
                msg.toast(data.msg);
                flag = false;
            }

            lazyLoadImg();

        }).fail(function(){
            msg.toast("网络开了会小差");
        });
    }
}


function renderTemplate(data){
    var html = "";

    for(var i in data.data){
        
        html += "<li class='item'>" + 
            "<a href='./index/detail.html?id=" + data.data[i].id + "'class='item-icon'>" + 
                "<img src='" + data.data[i].img +"''>" +
                "<h3 class='tit'>" + data.data[i].title + "</h3>";
                
                if ( data.data[i].discount_type === '1'){
                    html += "<p class='oli'><em class='gift'>礼</em>" + data.data[i].discount + "</p>";
                }else if (data.data[i].discount_type === '2'){
                    html += "<p class='oli'><em class='gift'>卡</em>" + data.data[i].discount + "</p>";
                }
                
                
                html += "<p class='price'><em class='activeprice'>" + 
                    "<i class='symbol'>￥</i>" + data.data[i].activity_price + "<i class='unit'>万</i></em>" +
                    "<em class='guideprice'>￥" + data.data[i].guide_price+ "万</em></p> </a></li>";
    }

    return html;              
}



function waitAajxDataLoad(){
    $(document).ajaxStart(function(){
        $(".js-load").addClass('active');
    });

    $(document).ajaxComplete(function(){
        $(".js-load").removeClass('active');
    });
}


function lazyLoadImg(){
    var imgs = $(".js-model-list li img");

    imgs.error(function(){
        var $this = $(this);
        $this.attr("src", "/exchange/Public/dev/img/pbl/defaultpic.jpg");
    });

}


//html
<div class="model">
    <div class="img"><img src="__PUBLIC__/dev/img/index/exchange-title.png"></div>
    <ul class="js-model-list">
       

    </ul>

    <div class="loadbox js-load">
        <img src="__PUBLIC__/dev/img/index/load.gif">正在加载...
    </div>
</div>

为什么这样写，手机浏览器还是会多次加载呢

Answer 1

增加判断条件 X

请求AJAX时设置为 x = true, 请求完成之后（无论失败或者成功）设置这个值为 false;

触发时判断X的值。