在input输入框输入中文时，需要即时查询出匹配输入内容的结果，一般我们会使用input事件监听用户输入事件，但是在输入汉语拼音时，也会触发input事件，前端就会不断发送请求，用户体验非常差劲。
针对这种情况，笔者给大家介绍一个简单易懂的好方法。

代码如下：

var cpLock = false;
$('#search-input').on('compositionstart', function () {
    cpLock = true;
});
$('#search-input').on('compositionend', function () {
    cpLock = false;
});
$('#search-input').on('input', function () {
    if (!cpLock) {
        // TODO
    }
});
````
#### 原理：
当浏览器有非直接的文字输入时, compositionstart事件会以同步模式触发.
当浏览器是直接的文字输入时, compositionend会以同步模式触发.
当元素监听到compositionstart事件，给input中事件加锁，禁止input中事件执行，当元素监听到compositionend事件，给input中事件解锁，正常执行。

将以上内容形成插件：
compositionEvent.js
````
var compositionEvent = {
    init: function(){
        this.compositionEventName = true;
        this.bindEvents();
    },
    bindEvents: function(){
        var self = this;
        $(document).on('compositionstart', function() {
            self.compositionEventName = false;
        });
        $(document).on('compositionend', function() {
            self.compositionEventName = true;
        });
    }
};
compositionEvent.init();
````