什么是防抖和节流？

一、目的

都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，防止在短时间内频繁触发同一事件而出现延迟，假死或卡顿的现象。

二、定义

节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效。

防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时。

三、节流的实现

方法一：定时器实现节流

//定时器实现节流
function throttling(func, wait) {
    var timer = null;
    return function () {
        var _this = this;
        var args = arguments;
        if (!timer) {
            timer = setTimeout(function () {
                timer = null;
                func.apply(_this, args);
            }, wait);
        }
    }
}

// 需要执行的参数
function log(a){
    console.log(a);
}

//执行调用
let logger = throttling(log, 2000);  //这里是传递函数，log不可以加括号，加上就执行了
logger(1);

该方法属于非立即执行，会在定时器时间结束后开始执行，上述代码即设置的是2秒延迟执行时间。

方法二、时间戳实现节流

//时间戳实现节流
function throttling(func, wait) {
    var initTime = 0;//定义初始时间
    return function () {
        var _this = this;
        var args = arguments;
        var newTime = +new Date();  //当前时间戳
        //判断用当前时间减去旧的时间，如果大于wait指定的时间就会触发
        if (newTime - initTime > wait) {
            //执行触发的函数
            func.apply(_this, args);
            //将旧时间更新
            initTime = newTime;
        }
    }
}

// 需要执行的参数
function log(a){
    console.log(a);
}

//执行
let logger1 = throttling(log,2000);
logger1(1);

该方法属于立即执行，会在触发后立即执行，然后在设置的时间内不会再执行。

四、防抖的实现

用定时器实现防抖

//用定时器实现防抖
function antiShaking(fn, wait) {
    let timout = null;
    return function () {
        clearTimeout(timout);
        timout = setTimeout(fn, wait);
    }
}

//需要执行的函数
function log(){
    console.log(window);
}

//执行调用
let logger = antiShaking(log,2000);
logger();

如有任何疑问或者质疑的地方，欢迎评论或留言讨论，大家一起学习一起讨论~~