为了账号安全,请及时绑定邮箱和手机立即绑定

关于下拉加载数据会多次执行的问题

关于下拉加载数据会多次执行的问题

慕哥9229398 2018-10-25 15:10:04
            init: function(e) {//这个函数相当于初始函数,页面一进来就会执行这里                        this.render(1);                        this.downScroll();        },        downScroll: function(){            var that = this;            var currPage = 1;            $(window).on('scroll', function() {                var activityHeight = $('#activityInfo').height(),                    windowScrollTop = $(window).scrollTop(),                    windowHeight = $(window).height();                if(windowScrollTop >= (activityHeight - windowHeight - 50)) {                    alert(currPage);//                    currPage++;                    that.render(currPage);//这个是渲染数据的方法                }            });        }移动端的下拉加载,换句话说也就是分页,可是我这里每次网页滑到底部都是执行两次,上面的alert会弹两次,相应的currPage也会每次加一,这就导致了,每次都会下拉加载两个页面,还请高手指教指教::
查看完整描述

1 回答

?
白衣染霜花

TA贡献1796条经验 获得超10个赞

基本实现思路就是每次下滑先锁定这个函数防止重入,在执行完之后延时一下再解锁

下面的代码是一个例子,请自行修改成需要的样子

    var scrolled = false;

    $(window).on('scroll', function () {

        if (scrolled)        //防止重入

            return false;

        scrolled = true;     //锁定函数

        var wScrollY = window.scrollY;

        var wInnerH = window.innerHeight;

        var bScrollH = document.body.scrollHeight;

        if (wScrollY + wInnerH >= bScrollH) {

            alert('')

        }

        //延时解锁,不能直接解锁的原因是此时第二个函数调用

        //还在消息队列里,此处直接解锁等于没有上锁

        $(window).setTimeout('scrolled=false', 1);

    });


查看完整回答
反对 回复 2018-11-23
  • 1 回答
  • 0 关注
  • 416 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信