手写防抖函数

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

立即执行：定时器为空的时候才能执行函数，每次获得定时器的参数之后，立即设置定时器，在定时器内部设置n秒后再把定时器置空（才能再次触发回调）

1,防抖函数有三个参数，触发的函数，间隔的时间，是否立即触发

1. 获得定时器和返回值（处理的结果），建立一个闭包，把该闭包返回
2. 闭包内：

1. 保存（要执行的函数的）this和参数，清除上一轮的定时器
2. 判断是否为立即执行，
3. 只有定时器为空的时候，取反（并设置定时器和置空时间）作为条 件，立即执行函数，（第一次进入的时候没有定时器）
4. 如果不是立即执行：设置定时器，在定时器内给回调函数.apply

var count=1
var container=document.getElementById('container')

//触发的函数
function addcount(e){
    container.innerHTML=count++
}
//鼠标移动,300ms后触发
let action=fd(addcount,1000,true)
container.onmousemove=action

//取消按钮
let btn=document.getElementById('btn')
btn.onclick=function(){
    action.cancel()
}
//防抖函数
function fd(func,wait,immediate){
    //定时器，返回值
    let t,result

    let callfunc=function(){
        //this
        const athis=this
        //e
        const args=arguments
         //清除上轮的定时器
        if(t){
            clearTimeout(t)
        }
        //是否立即执行
        if(immediate){
            let call=!t
            //置空定时器
            t=setTimeout(function(){
                t=null
            },wait)
            if(call){
                result=func.apply(athis,args)
            }
        }else{
            t=setTimeout(function(){
                func.apply(athis,args)
            },wait)
        }
        return result
    }
    //清除定时器
    callfunc.cancel=function(){
        clearTimeout(t)
        t=null
    }
    return callfunc 
}