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();

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

  • 相关阅读:
    IIS7.5解决应用程序池回收假死问题
    SQLServer跨库查询--分布式查询(转载)
    解决:System.Data.SqlClient.SqlError: FILESTREAM 功能被禁用
    Silverlight:telerik RadControls中RadGridView的一个Bug及解决办法(转载)
    list如何remove
    2015-11-18看的几篇文章,还没看完,先记录一下,回家看
    详解Android中AsyncTask的使用
    [Android] 随时拍图像处理部分总结及源码分享
    [Android] 通过GridView仿微信动态添加本地图片
    Android5.0以上系统的移动网络开关
  • 原文地址:https://www.cnblogs.com/liliy-w/p/10930682.html
Copyright © 2011-2022 走看看