本文实例讲述了 JavaScript 高级函数应用之分时函数. 分享给大家供大家参考, 具体如下:
一, 前提介绍:
某些函数是用户主动调用的, 但因为一些客观的原因, 这些函数会严重影响页面的性能.
二, 应用场景:
在短时间内往页面中大量添加 DOM 节点显然会让浏览器吃不消, 往往会导致浏览器的卡顿甚至假死.
三, 解决方案:
以上述添加节点的例子来说明问题, 我们将创建节点的工作分批进行, 比如把 1 秒钟创建 1000 个节点, 改为每隔 200 毫秒创建 8 个节点.
四, 实现代码如下:
- var timeChunk = function(ary, fn, count){
- var obj,t;
- var len = ary.length;
- var start = function(){
- for(var i=0;i<Math.min(count ||1, ary.length );i++){
- var obj = ary.shift();
- fn(obj);
- }
- };
- return function(){
- t = setInterval(function(){
- if(ary.length === 0){ // 如果全部节点都已经被创建好
- return clearInterval(t);
- }
- start();
- }, 200); // 分批执行的时间间隔, 也可以用参数的形式传入
- };
- };
五, 调用验证方法
- var ary = ['aa','bb','cc',.....];
- var renderFriendList = timeChunk( ary, function(n){
- var div = document.createElement('div');
- div.innerhtml = n;
- document.body.appendChild(div);
- },8);
- renderFriendList();
更多关于 JavaScript 相关内容可查看本站专题:JavaScript 常用函数技巧汇总,javascript 面向对象入门教程,JavaScript 错误与调试技巧总结,JavaScript 数据结构与算法技巧总结及JavaScript 数学运算用法总结
来源: http://www.jb51.net/article/145016.htm