函数节流和防抖

记录下函数节流和防抖，以前写后端的时候从来不知道还有这个说法，但是在前端好像应用的很多

函数节流

限制函数在一段时间内只能执行一次

适用情景：
1、高频点击表单提交
2、滚动条问题等（滚动加载更多，判断滚动高度）
3、搜索栏搜索关键字提示

代码实现：

// 第一种通过判断时间间隔实现
throttle(fn, interval) {
   let lastTime = 0;
   return function () {
       const currentTime = +new Date();
       if (currentTime - lastTime > interval) {
           fn.apply(this, arguments);
           lastTime = currentTime;
       }
   };
}

// 第二种通过标记判断
throttle(fn, interval) {
     let canRun = true;
     return function () {
         if (!canRun) {
             return;
         }
         canRun = false;
         setTimeout(function () {
             fn.apply(this, arguments);
             canRun = true;
         }, interval);
     };
   }

函数防抖

触发事件之后n秒内，函数只能执行一次，如果在n秒内事件再次触发，会重新计算函数执行时间
简单来说就是一个函数一直触发，但是只会执行最后一次

适用场景：
1、文本框输入监听（判断用户名是否被占用，判断输入值是否合法等等），比丢失焦点判断友好的多

代码实现：

// 在设置好的时间内，每当函数被触发时，就清除前一个设置的定时器。
debounce(func, wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;
        if (timeout)  {
      	  clearTimeout(timeout);
        }
        timeout = setTimeout(() => {
            func.apply(context, args)
        }, wait);
    }
}