js性能优化之分时函数

来源:互联网 发布:怎么提高淘宝流量 编辑:程序博客网 时间:2024/05/17 04:22

分时函数和函数节流的问题不一样,函数节流针对的事件不是用户主动调用的,前面已经提过了。
函数节流的原理是:延迟当前函数的执行,如果该次延迟还没有完成,那么忽略接下来该函数的请求。也就是说会忽略掉很多函数请求。

分时函数处理的问题是用户主动调用的,比如插入千百个节点

var arr = [];for (var i = 1; i <= 1000; i++) {    arr.push(i) //假设arr装载了100个好友数据}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(arr)

分时函数的原理是让创建节点的工作分批进行,比如把1s创建1000个节点,改为每200ms创建8个节点(其实就是一种异步函数的思想)

var timeChunk = function(arr, fn, count) {    var obj, t;    var len = arr.length;    var start = function() {        for (var i = 0; i < Math.min(count || 1, arr.length); i++) {            var obj = arr.shift();            fn(obj)        }    };    return function() {        t = setInterval(function() {            if (arr.length === 0) {                return clearInterval(t);            }            start()        }, 200)    }}var renderFriendList = timeChunk(arr, function(n) {    var div = document.createElement('div');    div.innerHTML = n;    document.body.appendChild(div)}, 8)renderFriendList();
0 0