今天在工作中遇到如下问题:
在本地做数据搜索,用户输入中文或者英文,能够筛选出符合条件的数据,当用户键盘输入过快,导致浏览器卡死,不能使用
筛选过程描述
当用户输入中文或者英文,根据算法(字符匹配),将用户输入全部转为因为英文,然后根据英文条件对本地数据做数据筛选。
问题分析:
将用户输入转为英文需要做大量模式匹配,速度非常的慢,然后再对本地数据做数据筛选,因为响应的时间是Keyup,所以处理的请求比较多,需要大量的CPU资源,导致浏览器卡死。
解决办法:
当用户连续两次输入的时间间隔小于200毫秒的时候,则处理事件。
下面的例子就是做了一个数据延迟响应的demo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>事件延迟响应</title>
</head>
<body>
<input id="huangbiao" >
<button id="myBtn">测试jquyer内部数据</button>
<script src="../../js/lib/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var abc = $("#huangbiao").keyActionLater({
// 持续时间
duration : 1000,
// 事件类型
eventType : "click",
// 耗时的方法
logicAction : function(){
console.log("我的过程非常耗时1111");
}
});
$("#myBtn").on("click",function(){
abc.setName("LIUMEI");
})
});
$.fn.keyActionLater = function(userSetting){
//当前对象
var that = $(this);
// 开始时间
var startTime = new Date().getTime();
// 触发事件的时间
var currentTime = 0;
// 定时器对象的句柄
var timerObj = null;
// 定义一个内部数据
var name = "huangbiao";
// 定义一个内部方法
function getName(){
console.log(name);
}
// 给keyActionLater对象扩展方法
that.setName = function(newName){
name = newName;
console.log("name : " + name);
getName()
};
// 默认配置信息
var defaultSetting = {
// 持续时间
duration : 500,
// 事件类型
eventType : "keyup",
// 耗时的方法
logicAction : function(){
console.log("我的过程非常耗时");
}
};
defaultSetting = $.extend(defaultSetting,userSetting)
/**
* this 代表jquery选中的dom对象
*/
$(this).on(defaultSetting.eventType,function(){
getName();
currentTime = new Date().getTime();
//console.log(currentTime + "----" + startTime + "----" + (currentTime - startTime));
if(currentTime - startTime > defaultSetting.duration){
timerObj = setTimeout(defaultSetting.logicAction,defaultSetting.duration)
}else{
clearTimeout(timerObj);
timerObj = setTimeout(defaultSetting.logicAction,defaultSetting.duration);
}
startTime = currentTime;
});
return that;
}
</script>
</body>
</html>