js 延遲事件載入
阿新 • • 發佈：2019-02-11
今天在工作中遇到如下問題：
在本地做資料搜尋，使用者輸入中文或者英文，能夠篩選出符合條件的資料，當用戶鍵盤輸入過快，導致瀏覽器卡死，不能使用
篩選過程描述
當用戶輸入中文或者英文，根據演算法（字元匹配），將使用者輸入全部轉為因為英文，然後根據英文條件對本地資料做資料篩選。
問題分析：
將使用者輸入轉為英文需要做大量模式匹配，速度非常的慢，然後再對本地資料做資料篩選，因為響應的時間是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>