JS节流小知识

一、什么是节流？

• 节流：当某个操作是连续性执行的时候，我们通过某种方式，降低该操作的执行频率，这就是节流。就跟水龙头放水一下，节流可以起到开关的作用，可以调节水流的大小。（个人的理解）
• 比如讲某个操作在1秒钟内会执行100次，通过节流方式，让该操作在1秒钟内只会执行10次，那么就做到节流。

二、做节流有什么好处？

• 我们有很多场景，比如我们在拖动一个物体的时候，会监听物体的坐标，一般情况下，只要一拖动，坐标就会实时返回，会返回很多次，这其实没有必要的，如果我们有需求是需要记录这些坐标的话，就会产生很多没有必要的数据。这个时候，如果做了节流处理的话，就能大大降低执行的次数，避免很多不必要的数据记录。

三、如何做节流？（用一个栗子来说明）

例子：拖动一个方块，并且打印拖动过程中方块的坐标信息

1.正常的做法

const boxDom = document.querySelector('.box');
boxDom.addEventListener('drag',function(e) {
      console.log(e.x + ':' + e.y);
})

正常的情况

2.节流的做法

 const boxDom = document.querySelector('.box');
        function throttle(fn) {
            let timer = null;
            return function() {
                if (timer) {
                    return;
                }
                timer = setTimeout(() => {
                    //执行操作(使用apply重新绑定this的指向)
                    fn.apply(this,arguments);
                    timer = null;
                },1000)
            }
        }
        boxDom.addEventListener('drag',throttle(function(e) {
            console.log(e.x +':'+e.y);
        }))

节流的情况

四、备注

参考来源