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

Question

        

    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也会每次加一，这就导致了，每次都会下拉加载两个页面，

还请高手指教指教：：

Answer 1

基本实现思路就是每次下滑先锁定这个函数防止重入，在执行完之后延时一下再解锁下面的代码是一个例子，请自行修改成需要的样子    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);    });