js节流防抖

节流： throttle 节流就是技能冷却中, 在一段时间内调用多次也只会触发一次。 比如点击按钮，一段时间内只能点击一次。点了一次之后 一段时间内就不让再点击了。

比如调用了闪现技能，那么调用完了之后120秒内再次调用闪现是没用的，有一段时间的冷却。如下方代码示例：

const throttle = (fn, time) => {
     let timer = null;  
     return (...arguments) => {
         if (timer) { return; }
         fn.call(undefined, ...arguments);
            timer = setTimeout(() => {
               clearTimeout(timer)
         }, time)
    }
}
function add() {
  console.log('hello---')
}
const d = throttle(add, 4000);

然后一直调用d(), 你会发现调用了一次之后的4s内，都不会执行add函数，这就是节流

防抖： debounce 就比如说防抖就是类似于回城被打断。在回城的过程中 只要被人攻击了 回城就会被打断，就会重新开始回城倒计时。一直调用一个函数，但是只会在最后一次调用完之后才会做出响应， 比如说搜索框，用户会一直进行输入，不可能每输入一下就去调用搜索接口，而是等用户最后一次输入之后的几秒后不再有输入操作了，再去调用接口，这样就不会频繁地调用接口了，如果在这个时间段内，还会再有输入就重新计时。 比如说拖动页面， 等页面拖动结束了之后再去调用回调函数进行相应的操作，而不是每次拖动就执行。

const debounce = (fn, time) => {
        let timer;
        return (...arguments) => {
            if (timer) { clearTimeout(timer) }
            timer = setTimeout(() => {
                fn.call(undefined,...arguments);
                clearTimeout(timer);
            }, time)
        }
    }
    function add() {
        console.log('hello')
    }
    const d = debounce(add, 4000);

一直调用d().会发现只有再最后一次调用只会的4s后才会有hello打印出来。