今天在工作中遇到如下问题:
在本地做数据搜索,用户输入中文或者英文,能够筛选出符合条件的数据,当用户键盘输入过快,导致浏览器卡死,不能使用
筛选过程描述
当用户输入中文或者英文,根据算法(字符匹配),将用户输入全部转为因为英文,然后根据英文条件对本地数据做数据筛选。
问题分析:
将用户输入转为英文需要做大量模式匹配,速度非常的慢,然后再对本地数据做数据筛选,因为响应的时间是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>