项目场景：

        程序中一个功能为输入框输入时，根据实时输入对树形结构内的数据进行搜索。

问题描述：

        问题在于树形结构数据量较多，由于使用的keyup事件，导致一次输入多个英文时，或者键盘输入中文及按Shift时每输入一个字母触发一次，导致输入时卡顿，需优化此问题。

原代码：

$("input[name='searchTree']").on("keyup",function(){changeDefaultCheck();var _self = $(this);$('#tree').tree('search',_self.val());});

解决方案：

        输入时，需判断输入内容是英文，还是中文，如用输入法输入中文则需要在选定中文之后再触发查询逻辑，查阅资料得知可以使用compositionstart、compositionend事件。

修改后代码为：

var flag = true;$("input[name='searchTree']").on('compositionstart',function(){    flag = false;})$("input[name='searchTree']").on('compositionend',function(){flag = true;})$("input[name='searchTree']").on('input',function(){var _self = $(this);setTimeout(function(){if(flag){changeDefaultCheck();$('#tree').tree('search',_self.val());}},0)})

中间出现问题为页面报错

 原因为$(this)未取到值，注意$(this)需要在setTimeout外面

需设置setTimeout，为了使compositionend事件滞后于input事件

参考于：

input、compositionstart、compositionend事件实现百度搜索框的实时性_未来以来 futureToday-CSDN博客_input start事件

input输入中文时，拼音在输入框内会触发input事件的问题。 - 游龙翔隼 - 博客园