积累就是提升之浅谈分时函数

Posted 2021-12-08 liliy-w

平时工作能把需求写出来，就已经很满足了，但是看人家大牛写的代码，确实需要优化和注意的东西太多太多了，平时遇到了就会欣赏欣赏记录一下。

分时函数

为了避免js一下执行太多的任务，使用分时函数进行，每隔一段时间执行一次任务，直到所以的任务都执行完毕，经常在大数据量渲染等场景使用。

分时执行的任务，分时执行的逻辑函数，每次执行的数量和时间间隔

举例创建qq好友列表的时候，列表中通常有上千上万的好友，如果一个好友用一个节点来表示的话，在我们渲染列表的时候，可能要一次性创建成百上千个节点，添加到页面中，在短时间内一次性添加操作太多的节点，浏览器会出现卡顿的现象，甚至假死。一般童鞋都会这样操作吧！

var ary = [];
    for (var i = 1; i <= 1000; i++) {
        ary.push(i); // 假设ary 装载了1000 个好友的数据
    };
    var renderFriendList = function (data) {
        for (var i = 0, l = data.length; i < l; i++) {
            var div = document.createElement(‘div‘);
            div.innerhtml = i;
            document.body.appendChild(div);
        }
    };
    renderFriendList(ary);

 

所以避免卡顿假死等，我们用timeChunk 函数优化处理一下，就可以解决这个问题。

var timeChunk = function (ary, fn, count) {//数据,逻辑，数量
        var obj,
            t;
        var len = ary.length;
        var start = function () {
            for (var i = 0; i < Math.min(count || 1, ary.length); i++) {
                var obj = ary.shift();
                fn(obj);
            }
        };
        return function () {
            t = setInterval(function () {
                if (ary.length === 0) { // 如果全部节点都已经被创建好
                    return clearInterval(t);
                }
                start();
            }, 200); // 分批执行的时间间隔，也可以用参数的形式传入
        };
    };

 

就这个案例，我们调用一下

var ary = [];
    for (var i = 1; i <= 1000; i++) {
        ary.push(i);
    };
    var renderFriendList = timeChunk(ary, function (n) {
        var div = document.createElement(‘div‘);
        div.innerHTML = n;
        document.body.appendChild(div);
    }, 8);
    renderFriendList();

这样就完美的实现了，可以自己敲一下，看看效果