防抖与节流函数

防抖和节流的作用都是在高频事件中防止函数被多次调用，是一种性能优化的方案。

区别在于，防抖函数只会在高频事件结束后n毫秒调用一次函数，节流函数会在高频事件触发过程当中每隔n毫秒调用一次函数。

防抖函数

触发高频事件后一段时间（wait）只会执行一次函数，如果指定时间（wait）内高频事件再次被触发，则重新计算时间。

封装

// 防抖函数
function debounce(func, wait) {
    let timeout = null;
    return function () {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
            func.apply(context, args)
        }, wait);
    }
}

节流函数

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效

封装

// 节流函数简易版
function throttle(func, wait) {
    let timeout = null;
    return function () {
        let context = this;
        let args = arguments;
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null;
                func.apply(context, args)
            }, wait)
        }
    }
}

实现立即执行的节流函数

function throttle(fn, interval, leading = true) {
    //该变量用于记录上一次函数的执行事件
    let lastTime = 0
    // 内部的控制是否立即执行的变量
    let isLeading = true
    
    const _throttle = function(...args) {
        // 获取当前时间
        const nowTime = new Date().getTime()
        
        // 第一次不需要立即执行
        if (!leading && isLeading) {
            // 将lastTime设置为nowTime，这样就不会导致第一次时remainTime大于interval
            lastTime = nowTime
            // 将isLeading设置为false，这样就才不会对后续的lastTime产生影响。
            isLeading = false
        }
        
        // cd剩余时间
        const remainTime = nowTime - lastTime
        // 如果剩余时间大于间隔时间，也就是说可以再次执行函数
        if (remainTime - interval >= 0) {
            fn.apply(this, args)
            // 将上一次函数执行的时间设置为nowTime，这样下次才能重新进入cd
            lastTime = nowTime
        }
    }
    // 返回_throttle函数
    return _throttle
}

应用场景

常见的应用场景都是使用高频事件来调用函数的过程当中，比如应用于window对象的resize、scroll事件，拖拽时的mousemove事件，文字输入、自动完成的keyup事件。

防抖应用场景

• scroll事件滚动触发事件
• 搜索框输入查询，如果用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户停止输入的时候，再调用，设置一个合适的时间间隔，有效减轻服务端压力。
• 表单验证
• 按钮提交事件。
• 浏览器窗口缩放，resize事件(如窗口停止改变大小之后重新计算布局)等。

节流的应用场景

• DOM 元素的拖拽功能实现（mousemove）
• 搜索联想（keyup）
• 计算鼠标移动的距离（mousemove）
• Canvas 模拟画板功能（mousemove）
• 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
• 监听滚动事件判断是否到页面底部自动加载更多