js 延迟事件加载

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

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

 

筛选过程描述

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

 

问题分析:

将用户输入转为英文需要做大量模式匹配,速度非常的慢,然后再对本地数据做数据筛选,因为响应的时间是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>

 

 

 

 

 

 

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭