面试复习题-JS手写节流防抖

✊不积跬步，无以至千里；不积小流，无以成江海

节流

思路

节流就是技能冷却中。

先定义一个功能能实现节流。

1. 定义一个变量d代表闪现，并执行它
2. 用setTimeout定义120s的功能
3. 只要调用了就应设立一个变量‘冷却中’设置为true
4. 在120s结束后将冷却中设置为false
5. 定义条件，如果正在冷却中，就直接return
6. 因为return，所以要设置一个函数名字为‘闪现’来拥有return值。

接下来要思考如何能够让这个节流函数具有普适性，即用一个函数生成节流。

1. 定义一个生成函数，确定输入参数应该为：会操作该函数的变量名，以及需要持续的时间；确定输出应该为一个函数。
2. 判断单一函数中的哪些变量是需要被定义的，即两个let
3. 需要return的内容就是闪现funciton中的内容
4. 新生成函数接受的参数可能为一个或多个，所以return函数中应该为...args，后把所有参数传给fn
5. 修改命名细节
6. 可以选删掉冷却中变量，直接用timer代替

实现

单一函数的节流实现

const d = ()=>{
    console.log('闪现')
}

let 冷却中 = false
let timer = null

function 闪现(){
    if(冷却中){return}
    d()
    冷却中 = true
    time.setTimeout(()=>{
        冷却中 = false
    }, 120*1000)}

普适性节流实现

const d = (distance)=>{
    console.log('闪现')
}

const createFn = (f, time) => {
    let 冷却中 = false
    let timer = null
return (...args) => {
    if(冷却中){return}
    f(...args)
    冷却中 = true
    time.setTimeout(()=>{
        冷却中 = false
    }, time)}
}

作用域

节流一般用在点击按钮上，表示不希望用户一致点击某个位置。

防抖

思路

防抖就是回城被打断。

先定义一个功能能实现节流。

1. 定义一个变量f代表回城，并执行它
2. 定义一个变量timer ，用来计数多长时间后触发回城技能
3. 命名一个函数包裹所有变量
4. 如果执行回城时timer却被再次调用，则回城技能将会被打断，那么就清空计时功能，重新执行回城函数
5. 如果回城执行成功，则把timer复原为null、

接下来要思考如何能够让这个防抖函数具有普适性，即用一个函数生成防抖。

1. 定义一个生成函数，确定输入参数应该为：会操作该函数的变量名，以及需要的时间；确定输出应该为一个函数。
2. 判断单一函数中的哪些变量是需要被定义的，即timer
3. 需要return的内容就是闪现funciton中的内容
4. 新生成函数接受的参数可能为一个或多个，所以return函数中应该为...args，后把所有参数传给fn
5. 修改命名细节

实现

单一函数的节流实现

const f = ()=>{
    console.log('闪现')
}

let timer = null

function 回城(){
    if(timer){
     clearTimeout(timer)
    }
    f()
    time.setTimeout(()=>{
        timer = null
    }, 3000)}

普适性节流实现

const debounce = (f, time) => {

    let timer = null

return (...args) => {

    if(timer){

     clearTimeout(timer)

    }

    timer = setTimeout(()=>{

        f(...args)

    }, time)}

}

作用域

防抖一般用在修改页面大小上，比如用户频繁做一个拖动页面的操作，我希望拖动停止后再进行某个操作。