防抖

函数防抖和节流，都是控制事件触发频率的方法。具体实现可以看我的这篇文章

input 如何处理中文输入

如果只是单纯的使用 input 事件来监听 input 值的改变，那么每次敲击键盘，输入一个字母都会触发 input 事件，其实我们想要的是获取用户输入的中文再进行后续操作。

我们可以假象一下，输入中文时的字母都是预输入，只有当选择候选词之后，input得到的值才是我们想要的。

现在，向大家介绍两个新的 DOM 事件：compositionstart、compositionend

  • compositionstart：compositionstart 事件触发于一段文字的输入之前
  • compositionend：当文本段落的组成完成或取消时, compositionend 事件将被触发
<input type="text">

let inputElement = document.querySelector('input')
let canRun = true

inputElement.addEventListener('compositionstart', function(){
  console.log('start')
  canRun = false
})

inputElement.addEventListener('compositionend', function(){
  console.log('end')
  canRun = true
})

inputElement.addEventListener('input', debounce(fn))

function debounce(fn) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments)
    }, 500)
  };
}

function fn(e){
  if(canRun){
    console.log(e.target.value)
  }
}

当我们切换到中文输入法输入时开始在 input 中输入时，compositionstart 的回调函数被调用，将 canRun 状态切换为 false，半秒后执行 fn 时，canRun 状态为 false，不进行任何操作，当中文输入结束后，compositionend 的回调函数被调用，将 canRun 变为 true，此时 input 的回调函数调用，就可以执行后续的操作了，其实就是利用了 compositionstart 和 compositionend 来切换状态机的状态