防抖与节流

防抖

将多个操作变成一次。在一定的时间内执行最后一次
模拟场景：
人员查询

input输入框

console

此时会一直打印，一直发送请求，这样很不友好。

封装防抖方法

input输入框

console

在规定的时间内执行最后一次。

节流

在一定的时间内调用一次函数
模拟场景：
1、提交表单 2、高频率监听事件

let telDo = document.querySelector('.box')
        telDo.addEventListener('touchmove', (e) => {
            console.log('发送请求')
        })

移动端触摸touchmove事件

image.png

手指在并屏幕一直滑动时事件触发会一直发送请求。

let telDo = document.querySelector('.box')
telDo.addEventListener('touchmove', funTouchmove(demo,2000))
        
 function funTouchmove(fun, time) {
            let timer = null
            return () => {
                if(!timer) {
                    timer = setTimeout(() => {
                        fun()
                        timer = null // 执行完事件后清空设置的时间
                    },time)
                }
            }
        }

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

image.png