耗时函数被短时间频繁调用时,防浏览器卡死的方法

96
九彩拼盘
2015.05.13 11:45* 字数 544

耗时函数如果在短时间内被频繁调用,如果不做合适的处理,会导致浏览器卡死(无响应),严重影响用户体验。

那我们应该如何处理呢?对于不同的类型的耗时函数有不同的处理方式。我将耗时函数分为两类,一类是,函数被频繁触发时,只需要执行最近的那次;另一类是,函数被频繁触发时,每次都需要被执行。

对于第一类。一般是类似这样的场景:我们要做根据用户文字的输入,实时显示查询结果的功能。当用户频繁的修改输入内容,那边就会导致未执行的查询函数的堆积。我们只需要查询最近用户输入的,堆积的函数不需要被执行。

做法是,每次要执行查询方法时,将之前没执行的那个查询方法取消执行。取消执行的方式是用 setTimeoutclearTimeout 来做。具体实现如下

<input type="text" id="input">
<script src="../../asset/vendor/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function() {
    function throttle(fn, time) {
        time = time || 200;
        var runId = null;
        return function() {
            var args = arguments;
            clearTimeout(runId); // 把之前没执行的给去掉
            runId = setTimeout(function() {
                fn.apply(fn, args);
            }, time);
        }
    }

    var search = function  (val) {
        $.ajax({
            url: 'error'// 404的地址,为了让代码进fail方法
        }).fail(function () {
            console.log(val);
        });
    };

    search = throttle(search, 500);

    $('#input').keyup(function () {
        search($(this).val());
    });
});
</script>

如果使用 Underscore.js 或 lodash.js。可以使用其 throttle 方法。

其他使用场景还有:滚动条滚动的处理函数。

对于第二类,函数每次都要被执行。可能的场景是:要做活动的签到图片墙功能。在一个时间点,可能有一大堆人来签到,而显示每次签到时,会有一个动画,而显示的设备的性能比较差时,如果同时做很多个动画,会导致显示的卡顿。我们可以执行签到动画之间加一些时间间隔。

做法是,将要执行的动画放入一个队列,隔一段时间,执行一个。具体实现如下

    <script src="../../asset/vendor/jquery-2.1.3.min.js"></script>
    <script>
    $(document).ready(function() {
        function queueCall(fn, time) {
            time = time || 200;
            var argsArr = []; // 执行方法的参数队列
            setInterval(function  () {
                if(argsArr.length === 0){
                    return;
                }
                var args = argsArr.shift();
                fn.apply(fn, args);
            }, time);
            return function () {
                argsArr.push(arguments);
            };
        };

        var signIn = function  (name) {
            console.log('sign in. name: ' + name);
        };

        signIn = queueCall(signIn, 1000);

        ['joel', 'jack', 'tom', 'jerry', 'jim'].forEach(function (name) {
            signIn(name);
        });
    });
    </script>

对于处理很耗时方法本身,可以使用 Web Workers


本文遵守创作共享CC BY-NC-SA 4.0协议
网络平台如需转载必须与本人联系确认。

🐋 Web 前端
Web note ad 1