防抖函数 debounce 和节流函数 throttle

明天考蓝桥web，复习下 debounce 和 throttle

debounce 防抖函数

应用场景：即时响应式的输入框、按钮等（毕竟没人知道用户究竟会怎么用）

前置知识：

闭包：与很多主流编程语言不同，JavaScript 在变量作用域上具有一些特殊表现。（摘自mdn）闭包是由函数以及声明该函数的词法环境组合而成的。该环境包含了这个闭包创建时作用域内的任何局部变量。(话说我还没有探究过为什么）

高阶函数：函数是一等公民，函数接受的参数是函数，返回值同样是一个函数；可以参阅 tapl 对 lambda 表达式的介绍。

this指向：

代码编写：

function debounce(fn, delay) {
  let timer = -1;
  return function() { // 如果这个时候用箭头函数...
    if (timer == -1) {
      // 第一次调用立即执行，可以删除
      fn.apply(this, arguments); // 如果不传入 this...
      timer = 0;
      return;
    }
    // 清除以前的池子中的任务
    if (timer) {
      clearTimeout(timer);
    }
    // 把一个新的任务加入池子
    timer = setTimeout(() => { // 如果这个时候不用箭头函数...
      fn.apply(this, arguments);
    }, delay);
  }
}

throttle 节流函数

代码编写：

function throttle(fn, delay) {
  let timer = -1;
  return function() {
    if (timer == -1) {
      fn.apply(this, arguments);
      return;
    }
    if (timer > 0) {
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        clearTimeout(timer);
      }, delay);
    }
  }
}