节流防抖函数

概念：

debounce 防抖 、 throttle 节流

节流
节流的原理很简单：
如果你持续触发事件，每隔一段时间，只执行一次事件。
根据首次是否执行以及结束后是否执行，效果有所不同，实现的方式也有所不同。
我们用 leading 代表首次是否执行，trailing 代表结束后是否再执行一次。

关于节流的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。

使用时间戳：

让我们来看第一种方法：使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为 0 )，如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。

———————————————————————————————————————————————————————————————————————

防抖函数分为非立即执行版和立即执行

• 非立即执行

非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

 function debounce(func, wait) {
   
    let timeout;
    return function () {
   
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);
        
        timeout = setTimeout(() => {
   
            func.apply(context, args)
        }, wait);
    }
}

我们依旧使用上述绑定 mousemove 事件的例子，通过上面的防抖函数，我们可以这么使用

content.onmousemove = debounce(count,1000);

可以看到，在触发事件后函数 1 秒后才执行，而如果是在触发事件后的 1 秒内又触发了事件，则会重新计算函数执行时间。

上述防抖函数的代码还需要注意的是 this 和 参数的传递

let context = this;
let args = arguments;

防抖函数的代码使用这两行代码来获取 this 和 参数，是为了让 debounce 函数最终返回的函数 this 指向不变以及依旧能接受到 e 参数。

• 立即执行版本

 function debounce(func,wait) {
   
    let timeout;
    return function () {