防抖与节流

1.防抖

原理：

事件响应函数在一段时间后才执行，如果这段时间内再次调用，则重新计算执行时间

也就是说,在这个时间内,无论你怎么触发事件,我都不会执行,只有这段时间无操作后才会执行!

作用：将短时间内的多次操作变成一次

例：

let input = document.querySelector('input')
input.addEventListener('input',antiShake(demo,1000))

防抖的封装：

 function antiShake(fn, wait) {
     let timeOut = null
     return args => {
       if (timeOut) clearTimeout(timeOut)
       // 我们想清楚的是setTimeout，首先应该存储这个timeOut的变量
       // 不打印一秒之前的输入的结果，需要消除一秒以前触发的定时器
       // timeOut变量需要一直保存在内存中 内存的泄露 闭包
        timeOut = setTimeout(fn, wait)
     }
 }

使用：

function demo(){
            console.log('发起请求');
        }

2.节流

作用：保证一定时间内只调用一次函数，一定时间内的多个操作变成一个

应用场景 => 1.提交表单 2.高频监听事件

例：

let box = document.querySelector('.box')
box.addEventListener("touchmove", throttle(demo, 1000))

节流的封装：

 function throttle(event, time) {
            let timer = null
            return args => {
                if (!timer) {
                    timer = setTimeout(() => {
                        event();
                        timer = null
                    }, time)
                }
            }
        }