JavaScript高级函数应用之分时函数实例分析


Posted in Javascript onAugust 03, 2018

本文实例讲述了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数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 #Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 #Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 #Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 #Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 #Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 #Javascript
小程序tab页无法传递参数的方法
Aug 03 #Javascript
You might like
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
php代码把全角数字转为半角数字
2007/12/10 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
python实现2048小游戏
2015/03/30 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
Python制作exe文件简单流程
2019/01/24 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
国外的一些J2EE面试题一
2012/10/13 面试题
文明礼仪伴我行演讲稿
2014/05/12 职场文书