[转]大数组的分时优化处理

最新推荐文章于 2024-08-07 10:09:10 发布

iteye_1458

最新推荐文章于 2024-08-07 10:09:10 发布

阅读量142

点赞数

分类专栏： JS-1 文章标签： json IE HTML

JS-1 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

呵呵，以后有大批数据要需要展示的时候，按照下面的方法整就行
客户体验很不错呀！！！ :P


<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>大数组的分时优化处理</title>
<style type="text/css">
    th { text-align: left; }
</style>
</head>
<body>

<button onclick="reset()" id="resetBtn" autocomplete="off">重置</button>
<button onclick="test1()" id="test1Btn" autocomplete="off">传统方式加载</button>
<button onclick="test2()" id="test2Btn" autocomplete="off">分时优化加载</button>

<div style="border: 1px solid black; width: 500px; margin: 10px 0; color: white">
    <div id="time-progress" style="background-color: navy; height: 16px; width: 0"></div>
</div>

<table id="demo">
    <col width="200" />
    <col width="300" />
    <tbody>
    <tr>
        <th>商品名称</th>
        <th>商品描述</th>
    </tr>
    </tbody>
</table>
<script type="text/javascript">

    // 模拟数据
    var JSON_DATA = [], i, len;
    for (i = 1; i <= 5000; ++i) {
        JSON_DATA.push(["商品名称" + i, "商品描述" + i]);
    }

    // 通用操作
    var demo = document.getElementById("demo"),
        tbody = demo.tBodies[0],
        tr, td, n = 0,
        addItem = function(data) {
            tr = document.createElement("tr");

            td = document.createElement("td");
            td.appendChild(document.createTextNode(data[0]));
            tr.appendChild(td);

            td = document.createElement("td");
            td.appendChild(document.createTextNode(data[1]));
            tr.appendChild(td);

            tbody.appendChild(tr);
            if(++n % 10 == 0)
                progressing();
        },
        reset = function() {
            resetBtn.disabled = true;

            if(window.ActiveXObject) { // ie
                var temp = document.createElement("div");
                temp.innerHTML  = "<table><tbody><tr><th>商品名称</th><th>商品描述</th></tr></tbody></table>";
                demo.replaceChild(temp.firstChild.tBodies[0], tbody);
                tbody = demo.tBodies[0];
            } else {
                tbody.innerHTML = "<tr><th>商品名称</th><th>商品描述</th></tr></tbody>";
            }

            n = 0;
            progress.innerHTML = "";
            progress.style.width = 0;

            test1Btn.disabled = false;
            test2Btn.disabled = false;
        },
        progressing = function() {
            progress.style.width = (progress.offsetWidth + 1) + "px";
        },
        resetBtn = document.getElementById("resetBtn"),
        test1Btn = document.getElementById("test1Btn"),
        test2Btn = document.getElementById("test2Btn"),
        progress = document.getElementById("time-progress");


    // 传统加载
    function test1() {
        resetBtn.disabled = true;
        test1Btn.disabled = true;
        test2Btn.disabled = true;

        var start = +new Date(), end;
        for (i = 0, len = JSON_DATA.length; i < len; ++i) {
            addItem(JSON_DATA[i]);
        }
        end = +new Date();
        progress.innerHTML = end - start;

        resetBtn.disabled = false;
    }

    // 分时加载
    function test2() {
        resetBtn.disabled = true;
        test1Btn.disabled = true;
        test2Btn.disabled = true;

        var start = +new Date(), end;
        timedChunk(JSON_DATA, addItem, null, function() {
            resetBtn.disabled = false;
            end = +new Date();
            progress.innerHTML = end - start;

        });
    }


    // 通用分时处理函数
    function timedChunk(items, process, context, callback) {
        var todo = items.concat(), delay = 25;

        setTimeout(function() {
            var start = +new Date();

            do {
                process.call(context, todo.shift());
            } while(todo.length > 0 && (+new Date() - start < 50));

            if(todo.length > 0) {
                setTimeout(arguments.callee, delay);
            } else if(callback) {
                callback(items);
            }

        }, delay);
    }

</script>
</body>
</html>

iteye_1458

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[转]大数组的分时优化处理

呵呵，以后有大批数据要需要展示的时候，按照下面的方法整就行客户体验很不错呀！！！ :P [code="html"]大数组的分时优化处理 th { text-align: left; }重置传统方式加载分时优化加载商品名称 ...
复制链接

扫一扫

专栏目录