javaScript之 防抖和节流

• 小哥哥：不由得想起了，防抖和节流。
• 面试官：能不能手撕一下。
• 老规矩，先了解概念，在分析分析需求，切记永远不要着急写代码。

• 函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
  • 不有的想起了一个场景，
    • 输入框内容校验 ，类似百度联想词
    • 通过监听 scroll 事件，检测滚动位置，根据滚动位置显示返回顶部按钮
    • 通过监听 resize 事件，对某些自适应页面调整DOM的渲染（通过CSS实现的自适应不再此范围内）
    • 通过监听 keyup 事件，监听文字输入并调用接口进行模糊匹配
    • ......
• 函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
  • 在来个不由得想起了一个场景，说这话的时候多少有点尴尬。
    • 抢购的时候。
    • ......
  • 画外音：任何脱离了业务场景的技术都是耍流氓，防抖也好，节流也罢，适合他的业务场景才是最好的。

• 防抖：我们应该封装一个函数，这个函数需要哪些参数，看上边概念的两个关键字：一定时间(delay)，处理函数(fn)。
• 开撕：

     function debounce(fn, dealy) {
         let timer = null
         return function () {
             //上来的给他清理掉哦，感兴趣的同学可以去研究下setTimeout(),和 
             // clearTimeout
             clearTimeout(timer)
             //在这个时间内我只调用一次事件处理函数，是不是达到防抖的目的呢。
             timer = setTimeout(function () {
                 fn.apply(this, arguments)
             }, dealy)
         }
     }
    // 功能实现，800ms之内，你触发多少次我只执行一次，就是这么任性
    input.oninput = debounce(fn,800)  

• 节流：我们还是应该封装一个函数，需要参数，事件处理函数（fn），一定时间(wait)

     function throttle(fn, wait) {
         //定义一个事件为0，第一次肯定会执行
         let lastTime = 0
         return function () {
             //拿到从1970年到现在的时间戳
             let nowTime = new Date.getTime()
             //在这个时间内我才触发事件处理函数，是不是起到节流的目的呢。
             if (nowTime - lastTime > wait) {
                 fn.apply(this, arguments)
                 lastTime = nowTime
             }
         }
     }
     //功能实现,不好意思，300ms这个时间之内，点击我多少次，我就给你处理一次，sorry
     button.click = throttle(fn,300)