解决input事件监听拼音输入法导致高频事件

1、业务场景

在文本框中输入内容，执行查询接口，但遇到一个问题，当用拼音打字写汉字去搜索的时候，会输入一些字母拼成汉字，怎么能监听等拼音文字输入完成后再触发文本框监听事件

2、解决方案

通过查阅资料得知在输入中文（包括语音识别时）会先后触发compositionstart、compositionend事件，类似于keydown和keyup的组合。

触发compositionstart时，文本框会填入 “虚拟文本”（待确认文本），同时触发input事件；在触发compositionend时，就是填入实际内容后（已确认文本）。

先看看 compositionstart 的描述 和 compositionend 的 描述

compositionstart 事件触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）。

compositionend 当文本段落的组织已经完成或取消时，会触发该事件。

3、具体实现

<div>
    <input type="text" class="input">
</div>

    <script>
        var inp=document.querySelector('input');
        let isComposite=false;//控制search()触发
        function search(){
            //接口开始查询
            console.log('搜索');
        }
        inp.addEventListener('input',function(){
            if(!isComposite){
            	settimeout(()=>{
               		search();
              	});
            }
        })
        inp.addEventListener('compositionstart',function (){
            console.log('start');
            isComposite=true;
        })
        inp.addEventListener('compositionend',function(){
            console.log('end');
            isComposite=false;
            //由于等待拼音字母输入结束后文本框输入事件则不监听了
            //所以在结束拼写监听中放search()
            search();
        })
    </script>