js 延迟事件加载

今天在工作中遇到如下问题：

在本地做数据搜索，用户输入中文或者英文，能够筛选出符合条件的数据，当用户键盘输入过快，导致浏览器卡死，不能使用

筛选过程描述

当用户输入中文或者英文，根据算法（字符匹配），将用户输入全部转为因为英文，然后根据英文条件对本地数据做数据筛选。

问题分析：

将用户输入转为英文需要做大量模式匹配，速度非常的慢，然后再对本地数据做数据筛选，因为响应的时间是Keyup，所以处理的请求比较多，需要大量的CPU资源，导致浏览器卡死。

解决办法：

当用户连续两次输入的时间间隔小于200毫秒的时候，则处理事件。

扫描二维码关注公众号，回复： 325309 查看本文章

下面的例子就是做了一个数据延迟响应的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>

猜你喜欢