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

本文链接：https://blog.csdn.net/qq_41429765/article/details/127434362

1.业务场景

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

2.解决方案

在js中有两个事件：

compositionstart：(监听拼音开始输入)

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){
                search();
            }
        })
        inp.addEventListener('compositionstart',function (){
            console.log('start');
            isComposite=true;
        })
        inp.addEventListener('compositionend',function(){
            console.log('end');
            isComposite=false;
            //由于等待拼音字母输入结束后文本框输入事件则不监听了
            //所以在结束拼写监听中放search()
            search();
        })
    </script>