JS防抖与节流

防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。等于就是动作操作完再执行回调。

典型应用场景：

手机号、邮箱验证输入检测，等用户输入完再进行检测
简单说就是一开始不会触发，停下来多长时间才会触发

function debounce(fn, delay) {
    let timer; // 维护一个 timer
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments); // 用apply指向调用debounce的对象，相当于this.fn(arguments);
        }, delay)
    }
}

//测试用例，鼠标一直动不会触发函数，当鼠标停下来了，触发函数

function testDebounce(e, content) {
    console.log(e, content);
}
let testDebounceFn = debounce(testDebounce, 1000); // 防抖函数
document.onmousemove = function (e) {
    testDebounceFn(e, 'debounce'); // 给防抖函数传参
}

节流

每隔一段时间，只执行一次函数。

典型应用场景：

1、hover弹出的导航栏，一直快速频繁的去触发hover，就会导致导航栏一直上上下下弹出，这时就要用到节流函数，每隔一段时间，只执行一次函数。
2、高频点击提交，表单重复提交
简单来说就是，不管你鼠标无影手不停地去触发，他只会按照自己的delay时间去触发，也就是只会按自己的节奏去触发，包括第一次触发也是多少delay后才会触发。

function throttle(fn, delay) {
    let timer;
    return function () {
        if (timer) {
            return;
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
        }, delay)
    }
}

//测试用例，鼠标移动触发，快速移动只按照delay的时间间隔触发
function testThrottle(e, content) {
    console.log(e, content);
}
let testThrottleFn = throttle(testThrottle, 1000); // 节流函数
document.onmousemove = function (e) {
    testThrottleFn(e, 'throttle'); // 给节流函数传参
}