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

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