在上一篇文章中写到了函数防抖，在使用函数防抖来进行搜索框优化的时候会遇到一个问题，就是监听文本输入框的input事件，在拼写汉字（输入法）但汉字并未实际填充到文本框中时会触发input事件，会出现下图的效果
上图的效果是没有采用函数防抖的效果的，如果加上函数防抖也同样会出现这个效果，在此仅仅是进行效果展示。这是我们不希望看到的，我们希望得到的效果是汉字输入进去以后再触发事件。 通过查询，我发现input有两个事件：compositionstart和compositionend。在输入中文（包括语音识别时）会先后触发compositionstart、compositionend事件，类似于keydown和keyup的组合。来看一下关于两个事件的介绍： compositionstart：事件触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）。个人可以理解为输入拼音状态开始执行的事件
compositionend：当文本段落的组织已经完成或取消时，会触发该事件。这个个人可以理解为输入拼音结束，按下空格将汉字输入完成以后执行的事件。 有了这两个事件，再加上onkeyup事件，我们就可以实现拼音阶段不执行搜索的效果了，具体思路为： 1. 声明一个全局变量flag，设置为true 2. 添加compositionstart事件，在该事件执行时将flag设置为false 3. 添加compositionend事件，在该时间执行时将flag设置为true 4. 添加onkeyup事件，在该事件执行时判断flag是否为true，如果为true，则执行搜索。
下面来看代码示例
代码语言：javascript复制<input id="txt" type="text">
<script>
var flag = true;
$('#txt').on('compositionstart',function(){
flag = true;
})
$('#txt').on('compositionend',function(){
flag = true;
})
$('#txt').on('keyup',function(){
var _this = this;
if(flag){
console.log($(_this).val());
}
})
</script>
