master

分支 (5)

管理

管理

master

tuture

develop

feature

features/CCAO-1-lszt

learn
/
分时函数.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            float: left;
        }
    </style>
</head>

<body>
    <script>
        // 用于解决大量添加dom界面的函数
        // var ary = []
        // for (let i = 0; i < 1000; i++) {
        //     ary.push(i)

        // }
        // var renderFriendList = function (data) {
        //     for (let i = 0; i < data.length; i++) {
        //         var div = document.createElement('div')
        //         div.innerHTML = i
        //         document.body.appendChild(div)
        //     }
        // }
        // renderFriendList(ary)

        // 上述方式 可能导致卡顿
        var timeChunk = function (ary, fn, count) {
            var obj, t;
            var len = ary.length
            var start = function () {
                for (let i = 0; i < Math.min(count || 1, ary.length); i++) {
                    var obj = ary.shift();
                    fn(obj)
                }
            }
            return function () {
                t = setInterval(() => {
                    if (ary.length === 0) {
                        return clearInterval(t)
                    }
                    start()
                },200);
            }
        }

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

        renderFriendList()
    </script>
</body>

</html>