防抖与节流

防抖意义：防抖是为了避免无效操作，也就是说当前操作是否有效，取决于在一定时间内是否有下一次操作，如果有，则覆盖上一次操作。

使用场景：

例如关键词搜索，input 框为了提高客户体验，一般都是绑定 oninput 而非 onchange，这种情况下，

1. 如果客户 100 ms 内连续输入多个字符，就会触发多次 api 请求，很浪费服务端资源。
2. 响应很快的情况下，搜索结果多次连续渲染会造成视觉抖动，客户体验也会很差。
3. 还有一个是算法本身，如果输入一个连续且关联性较高的内容，相对来说会搜索到比较满意的结果，反之就会搜索到一些不相关的信息。

所以我们需要做一个延时功能，在客户一定时间内没有动作的时候才触发有效搜索。

节流意义：节流是为了阻止无效操作，也就是说当前操作正在执行，在执行完毕之前，后续的操作都是无效的，所以说防抖讲究延时性，而节流讲究及时性。

使用场景：

例如表单提交，提交的一瞬间就应该锁定表单，禁止重复提交，直到客户端接收到响应后解除锁定。

另一个场景例如鼠标滚动加载，我们的习惯是一次性滚动一个比较大的范围，但是我们希望只有第一次执行，从而保证既能及时加载数据又不至于太浪费资源。

所以我们需要做一个及时但是节流的功能，在首次动作完成之前，后续的动作都是无效的。

实现：

/* 这个函数返回一个动作，并记录动作的次数 */
function getHandle(markup) {
  let count = 0;
  return () => console.log(markup, ++count);
}

/* 防抖 */
function debounce(delay, handle) {
  let timer = null;
  return function (record) {
    console.log(record);
    timer && clearTimeout(timer);
    timer = setTimeout(handle, delay);
  };
}
const handle = debounce(100, getHandle("debounce done"));
handle("debounce 1");
handle("debounce 2");
handle("debounce 3");

/* 节流 */
function throttle(delay, handle) {
  let flag = false;
  return function (record) {
    console.log(record);
    if (flag) return;
    flag = true;
    const result = handle();
    if (result instanceof Promise) {
      result.then(() => (flag = false));
    } else {
      setTimeout(() => (flag = false), delay);
    }
  };
}
const handle1 = throttle(100, getHandle("throttle done"));
handle1("throttle 1");
handle1("throttle 2");
handle1("throttle 3");

/* 这个函数返回一个异步动作，并记录动作的次数 */
function getAsyncHandle(markup) {
  let count = 0;
  return () =>
    new Promise((res, rej) => {
      console.log(markup, ++count);
      setTimeout(() => res(), 100);
    });
}

const handle2 = throttle(100, getAsyncHandle("async throttle done"));
handle2("async throttle 1");
handle2("async throttle 2");
handle2("async throttle 3");

测试结果：

 

这个结果说明测试通过了，我们把它写成一个模块，以便在项目的任何地方使用。

模块化：

/* 防抖 */
function debounce(delay, handle) {
  let timer = null;
  return function () {
    timer && clearTimeout(timer);
    timer = setTimeout(handle, delay);
  };
}

/* 节流 */
function throttle(delay, handle) {
  let flag = false;
  return function () {
    if (flag) return;
    flag = true;
    const result = handle();
    if (result instanceof Promise) {
      result.then(() => (flag = false));
    } else {
      setTimeout(() => (flag = false), delay);
    }
  };
}

export { debounce, throttle };

--- THE END ---