【图片滚动加载】如何解决滚动触发大量事件导致加载性能差

解决方向：

1、节流：特定delay时间内，无法再触发相关功能函数的执行

2、防抖：在节流的基础上，避免大量滚动触发事件导致相同的功能函数执行多次，因此设置timeout定时器，在等待执行的定时器有且仅有一个，delay时间后定时器中的内容执行完毕，定时器取消

3、两者互相控制：由于有时候网络请求比较快，快于delay时间，那么仅仅使用节流函数，会导致为了满足delay长的等待时间而导致请求挂起；所以，加入timeout定时器，如果节流满足，则执行节流内容，如果未到节流delay时间，则放入定时器中。

代码如下：

//利用闭包！其中fn代表需要执行的功能函数   
const throttleScroll = () => {
        let preLineNum = 1
        let curPage = 1
        let timeout = null as unknown as any
        let pretime = null as unknown as any
        const delay = 500

        return function (this: any) {
            let context = this
            let curtime = Date.now()
            if (!pretime) pretime = curtime

            //delay时间内只执行一次
            if (curtime - pretime >= delay) {
                pretime = curtime
                fn.apply(context)
                clearTimeout(timeout)
                return
            }
            if (timeout) clearTimeout(timeout)
            timeout = setTimeout(() => {
                // pretime = Date.now()
                // timeout = null

                fn.apply(context)
                timeout = null
            }, delay);
        }
    }



  container?.addEventListener("scroll", throttleScroll())