javascript性能优化之分时函数的介绍
更新时间：2018年03月28日 14:17:42 作者：KaRaoXake
本篇文章主要介绍了javascript性能优化之分时函数的介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
分时函数和函数节流的问题不一样，函数节流针对的事件不是用户主动调用的，前面已经提过了。
函数节流的原理是：延迟当前函数的执行，如果该次延迟还没有完成，那么忽略接下来该函数的请求。也就是说会忽略掉很多函数请求。
在一些开发场景中，我们可能会一次性向文档中注入上千个节点，在短时间内向浏览器中大量添加DOM节点可能会让浏览器吃不消，结果往往会让浏览器卡顿或吃不消，解决方案之一便是使用分时函数（timeChunk）。
timeChunk分时函数让创建节点的工作分批进行，比如一秒钟创建1000个节点，改为每个200ms创建10个节点。具体timeChunk函数封装如下:
function timeChunk( arr, fn, count){//arr 数组 fn操作函数 count每次操作数量
var obj,
t;
var start = function(){
var len = Math.min(count||1,arr.length);
for(var i=0; i < len; i++){
obj = arr.shift();
fn(obj)
}
};
return function(interval){
t = setInterval(function(){
if(arr.length==0){
return clearInterval(t)
};
start();
},interval||200)
}
}
应用：
加入我们要在文档中添加1000个节点，可以利用timeChunk分时函数每200ms连续添加20个节点。
var arr = [];
for(var i = 1; i <= 1000; i++){
arr.push(i)
}
var renderLists = timeChunk(arr,function(i){
var div = document.createElement('div');
div.innerHTML = i;
document.body.appendChild(div);
},20);
renderLists(200);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS限制条件补全问题,涉及javascript数组、字符串的递归、遍历、排序及正则操作相关技巧,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了谈谈JS中常遇到的浏览器兼容问题和解决方法 ，有些代码在某些浏览器的某些版本中表现出不兼容，影响页面的体验；这时就需要处理了这些兼容问题，让页面在多个版本的浏览器上运行良好。2016-12-12
这篇文章主要为大家介绍了Taro 小程序持续集成实现及原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
这篇文章主要介绍了JS+HTML5实现的前端购物车功能插件,结合完整实例形式分析了JS结合HTML5的storage特性存储数据实现购物车功能的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-10-10
在有些时候我们无法控制乱码的出现, 比如发送邮件的时候有些邮件显示乱码, 比如Ajax返回数据总是乱码. 怎么办?2009-11-11
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
这篇文章主要介绍了浅谈TypeScript 用 Webpack/ts-node 运行的配置记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
下面小编就为大家带来一篇js 显示日期时间的实例(时间过一秒加1)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了JavaScript基于数组实现的栈与队列操作,结合实例形式分析了栈与队列的操作原理及javascript使用数组实现栈与队列的相关技巧,需要的朋友可以参考下2018-12-12
这篇文章主要为大家详细介绍了js界面跳转与值传递的相关代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
根据 W3C DOM 2 Events 描述，EventTarget 接口被所有支持 DOM 事件模型的节点（Node）实现。 该接口提供addEventListener 和removeEventListener方法，用来绑定或解绑一个 EventListeners 接口到一个 EventTarget。2010-10-10
最新评论