前端：防抖节流函数

什么是防抖节流，前端八股中频繁出现实际项目大量应用场景。

上代码！！

防抖：事件触发后过段时间再执行如果再这个时间内再次触发事件，取消之前的事件 执行最新的事件。（输入框搜索、窗口调整、按钮频繁点击、）

function debounce(fn, delay = 500) {
            let timer = null;
            // 有定时器清除然后执行最新事件
            return function () {
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    // this.apply指定当前上下文应用到该函数中
                    fn.apply(this, arguments)
                    timer = null
                }, delay)
            }
        }
        input1 = document.getElementById('input1')
        input1.addEventListener('keyup', debounce(function () {
            console.log(input1.value)
        }, 600))

传入了两个参数 一个是事件一个是定时器的时间（默认500 单位：毫秒）

这个函数调用监听了键盘按键弹起的事件，防抖函数限制用户在某个场景连续按下某个按键

第一次点击后规定的时间内如果再次触发事件(通过判断有没有定时器) --> 有说明触发防抖 清除上次的定时器 执行最新的事件并添加定时器

节流：一段时间内只执行一次事件,无论事件触发的多频繁，节流只会确保在指定的时间间隔执行一次事件处理函数。（页面滚动、鼠标移动、持续触发的事件）

function throttle(fn, delay) {
            let timer = null

            return function () {
                if (timer) {
                    return
                }
                timer = setTimeout(() => {
                    fn.apply(this, arguments)
                    timer = null
                })
            }
        }
        let div1 = document.getElementById('div1')
        // 添加拖动事件 监听鼠标指针X/Y移动偏移量
        div1.addEventListener('drag', throttle(function (e) {
            console.log(e.offsetX, e.offsetY)
        }, 100))

传入了两个参数 一个是事件一个是定时器的时间（ 单位：毫秒）

添加拖动事件，监听鼠标X/Y轴移动的偏移量并对它进行监听

判断如果定时器说明有事件正在执行 进入判断 直接return等待上次事件。