前言

面试时最佳的面试状态就是把面试官不断的引导到你会的知识点上，当聊到闭包的时候就可以不经意的说一下可以实现防抖和节流。

防抖

防抖，就是延迟用户操作。比如搜索时，输入关键字多次点击搜索，每次都会延迟用户操作，并保持只有一个请求发送，以避免频繁发送请求，提高性能。

function debounce(fn,wait){
    let Timer = null 
    return funciton(...args){
    clearTimeout(Timer)
    Timer = setTimeout(()=>{
    fn.call(this,...args)// 为了确保原函数的this指向不会被改变
    },wait)
    }
}

整体就是利用了闭包，在闭包内保存一个定时器让其不被销毁，每次点击都会把上一次的定时器删除，只有当定时器内的时间达到时才会触发事件发送接口请求。

节流

防抖和节流最常见的用法都是避免用户频繁发送请求。节流的思想就是让用户在一段时间内只能够发送一次请求。

function throttle(fn,wait){
    let pre = Date.now()
    return function(...args){
        let cur = Date.now();
        if(cur - pre > wait){
        fn.call(this,...args)
        pre = cur
}}
}
btn.addEventListener('click', throttle(handle, 1500))

大体上就是利用闭包每次存储你上一次点击的时间戳，然后在下一次点击时和当前时间进行对比，两次相差时间大于所设定的时间才会第二次触发目标函数。这里顺便说一下为什么直接用call绑定就能够将其绑定回原来的this。throttle返回了一个函数体被放在了addEventListener内调用，所以return内的this指向btn，因此直接call(this)即可绑定回原本的this指向。

面试官：既然聊到了闭包，那你手写一个防抖节流吧

前言

防抖

节流