JS 消抖与节流 | TryCoding.Fun

今天碰到这么一个情况啊，同事的华为平板，点一个单选框，点一下等于点两下。在电脑上或者其他手机上都没法复现这个问题。这个 bug 由于没有 devtool 排查起来很困难。

后来他那边通过打印调试调出来了。点一下打印了 2 次。

我愣了一下，才想起来这个可能是由于华为平板触摸算法优化的不好，导致点一下等于点两下。消抖这种操作我已经很久没用了，没想到今天用上了。

偷懒，找网上现成的消抖和节流代码 mark 一下。

参考文章

js 消抖（debounce）与节流（throttle）

消抖

function debounce(fn, delay) {
  let args = arguments,
    context = this,
    timer = null;

  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

还有个 lodash 带的消抖方法，由群友友情提示，加上来的

https://www.lodashjs.com/docs/lodash.debounce

_.debounce(func, [wait=0], [options=])

节流

function throttle(fn, delay) {
  let timer = null,
    remaining = 0,
    previous = new Date();

  return function () {
    let now = new Date(),
      args = arguments,
      context = this;
    remaining = now - previous;

    if (remaining >= delay) {
      if (timer) {
        clearTimeout(timer);
      }

      fn.apply(context, args);
      previous = now;
    } else {
      if (!timer) {
        timer = setTimeout(function () {
          fn.apply(context, args);
          previous = new Date();
        }, delay - remaining);
      }
    }
  };
}

后记

上面的文章分享出来，就有热心群友指出不足之处了，感谢以下群友提醒

平平无奇深情段子手无霜-joker(资深全栈开发) - 提供 lodash 中的消抖方法_.debounce(func, [wait=0], [options=])#

时间大师_Logic（资深前端，熟练各种 js 高阶技巧） - 指出了代码中可优化部分

代码中可优化部分