什么是节流throttle？

什么是节流throttle?

函数节流（throttle）:是让一个函数无法在很短的时间间隔内连续调用，当上一次执行完之后过了规定的时间间隔，才能进行下一次的函数调用。（所谓节流，就是指连续触发事件但是在N秒中只执行一次函数）节流会稀释函数的执行频率。

即每间隔某个事件去执行某个函数，避免函数的过多执行，这个方式就叫函数节流

应用场景

window对象的resize、scroll事件

拖拽时候的mousemove

射击游戏中的mousedown、keydown事件

文字输入、自动完成的keyup事件

写法

const div1 = document.querySelector('#div1');
        var timer = null;
        div1.addEventListener('drag', function(e) {
            if (timer) {
                return
            }
            timer = setTimeout(function() {
                console.log(e.offsetX, e.offsetY);
                timer = null
            }, 1000)
        })

封装轮子

const div1 = document.querySelector('#div1');
function throttle(fn, delay = 500) {
            let timer = null;
            return function() {
                if (timer) {
                    return
                }
                timer = setTimeout(() => {
                    fn.apply(this, arguments) 
                    timer = null;
                    }, delay)
                }
            }
        div1.addEventListener('drag', throttle(function(e) {
            console.log(e.offsetX, e.offsetY);
        }))