中文输入法导致的高频事件

中文输入法造成的事件频繁触发的问题，有个文本框，注册了一个input事件，事件触发的时候了，调用了一个方法搜索，假设这个方法做了一些耗时的搜索操作，当输入英文的时候没有任何问题，但是切换成中文的时候就有如下问题：

 var inp = document.querySelector('input');
function search(){
  console.log('搜索：'+inp.value);
}
inp.addEventListener('input', function(){
  search();
})

下面截图的一块都是没有必要的：

那么怎么解决这个问题了，用防抖可以解决这个input事件在触发多久以后才触发一次search事件，

搜索联想，用户在不断输入值时，用防抖来节约请求资源

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

  var inp = document.querySelector("input");
  function search() {
    console.log("搜索：" + inp.value);
  }
  //  inp.addEventListener('input', function(){
  //   search();
  // })
  inp.addEventListener("input", debounce(search,500));

请求减少了，但是怎么解决中文输入法导致的高频事件？

解决办法如下

监听合成事件compositionstart和compositionend

let isCompsing = false;
  var inp = document.querySelector("input");
  function search() {
    console.log("搜索：" + inp.value);
  }
  inp.addEventListener("input", function () {
    if (!isCompsing) {
      search();
    }
  });
  inp.addEventListener("compositionstart", function () {
    console.log("中文输入开始");
    isCompsing = true;
  });
  inp.addEventListener("compositionend", function () {
    console.log("中文输入结束");
    isCompsing = false;
    search();
  });

效果如下：