懒加载+防抖+节流

1. js实现懒加载最关键的代码：

（1）对于图片
item.offsetTop < window.innerHeight + scrollTop

image.png

（2）对于滑动信息（相当于加载下一页）
mydiv.scrollTop >= mydiv.scrollHeight - mydiv.clientHeight
（就是当滚动的距离大于滚动高度和可视高度的差的时候就发送请求下一页，然后显示下一页信息）

2.代码实现懒加载+防抖/节流

var mydiv = document.getElementById("scroll");
    function handleScroll() {//判断是否滚动到底了
            console.log('mydiv.scrollTop', mydiv.scrollTop);
            console.log('mydiv.scrollHeight', mydiv.scrollHeight);
            console.log('mydiv.clientHeight', mydiv.clientHeight);
            if (mydiv.scrollTop >= mydiv.scrollHeight - mydiv.clientHeight) {
                console.log('bottom');
            }
    }
    function debounce(func,delay) {//防抖or节流函数
        var timer=null;
        return function(){
            let context=this;
            let args=arguments;
            // if(!timer){//节流需要加timer是否存在的判断
                clearTimeout(timer);//防抖就直接clear掉timer重新生成
                timer=setTimeout(function(){
                    func.apply(context,args);
                    //timer=null;
                },delay)
            // }
        }
    }
    mydiv.onscroll=debounce(handleScroll,1000);

防抖和节流在效果上的不同：
防抖要等到停止滚动的时候才执行handleScroll事件；
而节流是隔一段固定的时间就执行一次handleScroll事件，不管有没有滚动。