javascript - 页面滚到底部自动加载加载出现请求多次bug

问题描述

问 题

代码如下：

$(window).scroll(function(){
    var scrolltop=$(window).scrollTop();
    var wheight=$(window).height();
    var dheight=$(document).height();
    if(scrolltop>dheight-wheight-20){
        page++;
        $.ajax({
            type: "GET",
            url: url+"page/"+page,
            dataType: "json",
            success: function(data){
                $("#list").append(html字符串);
            }
    }
})

发现chrome开发者工具里显示发送多次请求，

求解决方案！

解决方案

//    增加一个变量记录是否处于请求中
var flag = true;

$(window).scroll(function(){
    var scrolltop=$(window).scrollTop();
    var wheight=$(window).height();
    var dheight=$(document).height();
    if(scrolltop>dheight-wheight-20 && flag){
        //    开始请求的时候，将状态置false;
        //    这样就算高度达到请求标准也无法进入请求状态
        flag = false;
        page++;
        $.ajax({
            type: "GET",
            url: url+"page/"+page,
            dataType: "json",
            success: function(data){
                $("#list").append(html字符串);
                //    将标志置为true，这样当高度再次达到标准时，可以执行请求
                flag = true;
            }
    }
})

这篇关于javascript - 页面滚到底部自动加载加载出现请求多次bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！