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

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

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

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

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

<input type="text" id="input">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../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协议
网络平台如需转载必须与本人联系确认。