zoukankan      html  css  js  c++  java
  • 积累就是提升之浅谈分时函数

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

    分时函数

    为了避免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();

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

  • 相关阅读:
    P3254 圆桌问题
    P4868 Preprefix sum
    2021sd省选游记
    P4145 上帝造题的七分钟2 / 花神游历各国
    P2801 教主的魔法
    P4147 玉蟾宫(悬线法)
    P1944 最长括号匹配
    CF1214D Treasure Island
    Loadrunner与kylinPET的能力对比测试--web动态请求
    Summer——从头开始写一个简易的Spring框架
  • 原文地址:https://www.cnblogs.com/liliy-w/p/10930682.html
Copyright © 2011-2022 走看看