js滚动加载图片bug，ios手机滚动到底部不会加载一页而是加载好几页

Question

$(document).scroll(function (){
                        var scrollTop = $(this).scrollTop();
                        var scrollHeight = $(document).height();
                        var windowHeight = $(window).height();
                        if(scrollTop + windowHeight >= scrollHeight){
                            //这里是加载图片ajax
                        }                       
                    });

这是部分代码，逻辑就是滑动到底部的时候请求ajax，在安卓上可以一页一页正常加载，ios上则滑动到底部一下加载好几页，求教

Answer 1

加载好几页是因为scroll事件被多次触发，可以用节流函数来控制触发的时间间隔，比如underscore的throttle函数：

var throttled = _.throttle(updatePosition, 100);
$(window).scroll(throttled);
function updatePosition(){
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $(document).height();
    var windowHeight = $(window).height();
    if(scrollTop + windowHeight >= scrollHeight){
        //这里是加载图片ajax
    }                       
}

Answer 2

用一个全局变量控制，默认设为false，滚动时设为true，滚动完成再设为false

Answer 3

可以使用lodash或者是手动作一个时间间隔，强制增加触发间隔。

https://lodash.com/