JS封装节流与防抖

函数节流防抖主要运用一些高频率触发的事件行为中，我们常用到的有 window.onresize、window.mousemove等，这些事件高频率的触发，会造成页面卡顿，另外如果向后台发送请求，无疑会对服务器造成不必要的压力。防抖节流就是限制事件频繁调用，频繁触发的。

一、 函数节流

• 理解:在函数需要频繁触发时，函数执行一次后，只有大于设定的执行周期之后才会执行第二次
• 适用多次事件按时间做平均分配触发，例如按钮多次重复点击…
• 语法：throttle(callback,wait)
• 功能：创建一个节流函数，在wait时间内最多执行callback一次

function throttle(callback, wait) {
            //定义开始时间
            let start = Date.now() // 如果初始化也要执行，则将start设为0
            //返回结果是一个函数
            return function (e) {
                // 获取当前的时间戳
                let now = Date.now()
                if (now - start >= wait) {
                    // 如果满足条件，则执行回调函数
                    callback.call(this,e)
                    start = now
                }
            }
        }
        function handler(){
            console.log(Date.now());
        }
        window.addEventListener('scroll', throttle(handler, 1000))

二、函数防抖

• 理解：在函数需要频繁触发时，在规定时间内，只让最后一次生效，前面的不生效
• 适用多次时间一次响应的情况
• 语法：debounce(callback,wait)
• 功能：创建一个防抖函数，该函数会从上一次被调用后，延迟wait时间后调用

let input = document.querySelector('input')
        function debounce(callback, time) {
            //定时器变量
            let timeId = null
            //返回一个函数
            return function (e) {
                //判断
                if(timeId!==null){
                    clearTimeout(timeId)
                }
                //启动定时器
                timeId = setTimeout(() => {
                    //执行回调
                    callback.call(this, e)
                    //重置定时器
                    timeId = null
                }, time)
            }
        }
        input.onkeydown = debounce(e => {
            console.log(e.keyCode);
        }, 1000)