js防抖功能实现

大家好，今天来点有一点点难度的防抖原理实现，今天呢我们要实现的是一个豪华版的防抖，我想想奥，作为一个豪华版的防抖肯定不能只有防抖的功能，假如现在我们有一个输入框搜索的案例，我们使用防抖来进行约束，我们想一下，假如要是请求时间太长用户不想等待了，我们就得实现一个取消的功能，还有就是在某东上我们发现我们输入第一个字符就会直接显示，难道他们是没用防抖吗当然不是，他们采用了立即执行一次先，然后再进行防抖的约束，我们要实现的功能大概三个：

1、基本的防抖功能实现

2、添加取消的功能

3、添加立即执行一次的功能

下面我们开始实现一下防抖函数的初始准备函数：

html
<input type="text">
<button class="del">取消</button>
js代码：
输入框
const Input = document.querySelector('input')
取消按钮
const btn = document.querySelector('.del')

上面我们准备好了初始的代码，我们先实现最基础的防抖函数吧下面的讲解写在了代码中：

Input.oninput=chunk(()=>{
    console.log(12222)
},1000)
上面我们看到我们假设有一个chunk函数里面有一个回调函数，和一个时间，下面我们开始写
chunk函数
function chunk(fn,timer){
    let time
return ()=>{
    if(time)clearsetTimeout(time)
    time=setTimeout(()=>{
             fn()
             time=null
    },timer)
}    
}
上面这段代码其实很简单：大概思路就是我们定义一个空的time变量用来存储settimeout的标记
但我们要做防抖不仅仅是简单的推迟执行代码而是只执行最后一次代码，所以我们得判断一下
time是否有值有的话就给他清除掉在去执行函数

上面我们实现了基本的防抖函数，下面我们来实现下一个功能，取消功能：

function chunk(fn,timer){
    let time
const res=()=>{
    if(time)clearsetTimeout(time)
    time=setTimeout(()=>{
             fn()
             time=null
    },timer)
}    
因为函数也是一个对象，是对象的话我们就可以给对象添加方法或者变量，所以我们给变量添加
一个属性叫del清除方法
res.del=function(){
    if(time) clearsetTimeout(time)
}
return res
}
输入框
const a=chunk(()=>{
    console.log(12222)
},1000)
Input.oninput=a
按钮
btn.onclick=function(){
    a.del()
}

上面我们简单的调用了一下我们写的取消功能发现是可以的，其实面试的话实现第一个基本的就可以了，那有人就要问为啥还要写额外的功能呢，我记得网上有句话说的挺多的就是我可以不用但绝对不能不会，对吧，能多学一点是一点， 下面我们实现下一个叫立即执行的功能，其实这个功能也超级的简单，我们只用在多传一个参数就好啦，下面我们实现一下

function chunk(fn,timer，immer=false){
    let time
    let isImmer=false
const res=()=>{
    if(immer && !isImmer){
        fn()
        这里有人会问了为啥要单独定义一个呢，因为写工具函数有一个原则就是尽量不要去
        修改使用者传递进来的参数，万一后期添加功能的时候用到，这个变量就已经不干净了
        isImmer=true    
    }
    if(time)clearsetTimeout(time)
    time=setTimeout(()=>{
             fn()
             time=null
             isImmer=true
    },timer)
}    
 
res.del=function(){
    if(time) clearsetTimeout(time)
}
return res
}

我们就实现了一个豪华版的防抖函数，今天的知识点有点点多，大家好好消化一下，有不懂的可以私信我，我看到的话会回复并解答问题的，如果喜欢我写的内容，可以留下自己的一个赞万分感谢！！！