如何实现中文防抖

如何实现中文防抖

防抖：动作绑定事件，动作发生后一定时间后触发事件，在这段时间内，如果该动作又发生，则重新等待一定时间再触发事件。 防抖的简单封装：

function debounce(fn，delay) {
  // timer在闭包中，
  let timer = null;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.call(this, arguments);
      timer = null;
    }, delay);
  };
}

在输入框中使用防抖

const userName = document.getElementById('username');
userName.addEventListener('keyup', debounce(function() {
  console.log(this.value);
}, 1000));

上面这种封装和用法只能适用input输入非中文内容。如果我们在输入中文的时候就会有一些问题，还没有确定中文内容，但是定时器已经到时间了。就会触发后续的操作。

针对输入中文字符实现防抖

function debounce(fn, delay) {
  let timer = null;
  return function(e) {
    if (e.target.composing) {
      return;
    }
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.call(this, arguments);
      timer = null;
    }, delay);
  };
}

function compositionStart(e) {
  e.target.composing = true;
}

function compositionEnd(e) {
  e.target.composing = false;
  const event = document.createEvent('HTMLEvents');

  event.initEvent('input');
  e.target.dispatchEvent(event);
}

测试中文防抖

const userName = document.getElementById('username');
userName.addEventListener('keyup', debounce(function(e){
  console.log(this.value);
}, 2000));

userName.addEventListener('compositionstart', compositionStart);
userName.addEventListener('compositionend', compositionEnd);

提到防抖，我们就不得不想起节流，

节流： 动作绑定事件，动作发生后一段时间后触发事件，在这段时间内，如果动作又发生，则无视该动作，直到事件执行完后，才能重新触发。 防抖的简单封装：

function throttle(fn, delay) {
  let timer = null;
  return function () {
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      fn.call(this, arguments);
      timer = null;
    }, delay);
  };
}
```/