javascript 数组分时操作

最新推荐文章于 2024-08-09 21:30:00 发布

一剑平江湖

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量592

点赞数

分类专栏： JavaScript 文章标签： javascript autocomplete function callback date json

本文链接：https://blog.csdn.net/diligentcatrich/article/details/6730989

版权

JavaScript 专栏收录该内容

136 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Array Processing Test</title>
<style type="text/css">
th { text-align: left; }
</style>
</head>
<body>

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

    // 模拟数据
    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;

});
}

    // 通用分时处理函数
    //items要处理的数组
    //process处理函数，
    //暂时无用
    //callback处理完成后的回调函数
    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) {
                alert(arguments.callee);
                setTimeout(arguments.callee, delay);
            } else if (callback) {
                callback(items);
            }

        }, delay);
    }

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