节流相较于防抖来说就简单多了,
用简单的话来说,防抖就是只执行最后一次;那么节流就是控制事件触发的次数接下来还是用代码说话

1. 为什么有节流

首先下面有一段这样的代码

        window.addEventListener('scroll',function(){
            console.log(123);
        });

运行到浏览器中后,就会有这样的情况

每次滚动都会触发这个事件,但是仅仅几秒钟就已经触发了200多次,那如果是和后台交互数据的话,这样的频率和数据量会占很多带宽,会很耗性能。那么我们就会想到,能不能让它的执行次数减少,这个就是节流的初始

2. 实现

有了最初始的问题了,那么现在就来解决问题!
解决这个问题,会用到一个 开关思想 那么代码如下:

var flag = true;
window.addEventListener('scroll',function(){
     if(flag){
         setTimeout(()=>{
             console.log(123);
             flag = true;
         },1000);
     }
     flag = false;
 });

浏览器运行结果:

每次经过1000ms打印一次,(时间根据所需更改)这样就解决了访问次数过多的情况

3. 优化

将全局变量去掉,进行一个优化,进行封装,代码如下:

window.onscroll = throttle(function(){
            console.log(123);
        },1000)
        function throttle(fn,delay) {
            var flag = true;
            return function() {
                if (flag) {
                    setTimeout(() => {
                        fn.call(this)
                        flag = true;
                    }, delay);
                }
                flag = false;
            }
        }