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 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
jquery ready()的几种实现方法小结
Jun 18 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 Javascript
Vue组件之单向数据流的解决方法
Nov 10 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 引用文件技巧
2010/03/02 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
详解JavaScript树结构
2017/01/09 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
Python+django实现简单的文件上传
2016/08/17 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
详解Python time库的使用
2019/10/10 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
Python实现自动签到脚本功能
2020/08/20 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
Html5自定义字体解决方法
2019/10/09 HTML / CSS
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
节约电力资源的建议书
2014/03/12 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
端午节寄语2015
2015/03/23 职场文书
钱学森电影观后感
2015/06/04 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸