在一些开发场景中,我们可能会一次性向文档中注入上千个节点,在短时间内向浏览器中大量添加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)
}
}

应用实例见https://92node.com/article/js-fen-shi.html

javascript之分时函数的更多相关文章

  1. JavaScript高阶函数的应用

    定义 高阶函数是指至少满足下列条件之一的函数: 函数可以作为参数被传递: 函数可以作为返回值输出. JavaScript语言中的函数显然满足高阶函数的条件,在实际开发中,无论是将函数当作参数传递,还是 ...

  2. JavaScript中的函数:闭包,this,高阶函数

    一.函数基本理论 function compare(val1,val2){ return val1 - val2; }var result = compare(5,10); 1,函数的定义没什么意义, ...

  3. 分时函数 & 节流函数

    分时函数 & 节流函数 1.函数节流 JavaScript 中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合 理,否则我们一般不会遇到跟性能相关的问题.但在一些少数情况下 ...

  4. JavaScript权威指南 - 函数

    函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...

  5. 用javascript 写个函数返回一个页面里共使用了多少种HTML 标签

    今天我无意间看到一个面试题: 如何用javascript 写个函数返回一个页面里共使用了多少种HTML 标签? 不知你看到 是否蒙B了,如果是我 面试,肯定脑子嗡嗡的响.... 网上搜了搜也没有找到答 ...

  6. JavaScript基础学习-函数及作用域

    函数和作用域是JavaScript的重要组成部分,我们在使用JavaScript编写程序的过程中经常要用到这两部分内容,作为初学者,我经常有困惑,借助写此博文来巩固下之前学习的内容. (一)JavaS ...

  7. JavaScript 基础回顾——函数

    在JavaScript中,函数也是一种数据类型,属于 function 类型,所以使用Function关键字标识函数名.函数可以在大括号内编写代码并且被调用,作为其他函数的参数或者对象的属性值. 1. ...

  8. JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  9. javascript立即执行函数

    javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花;当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解.  ( ...

随机推荐

  1. [面经] 南京SAP面试(下)

    上一篇讲到了一面结束,这一篇说说剩下的事情. 周三上午一面完了之后回去上班,本以为要等几天才会二面,结果那个经理M下午就打电话给我,约了第二天(周四)下午过去面试,会有Boss从上海过来面,办事效率还 ...

  2. Apache配置虚拟主机httpd-vhosts.conf

    一.配置虚拟主机需要3个文件  1.Apache/conf/httpd.conf 2.Apache/conf/extra/httpd-vhosts.conf (这个地版本的apache可能没有,可自己 ...

  3. python tensorflow keras

    pip install tensorflow pip install keras pip install theano http://www.open-open.com/lib/view/open14 ...

  4. Python开发【数据结构】:排序练习

    排序练习 问题一: 现在有一个列表,列表中的数范围都在0到100之间,列表长度大约为100万.设计算法在O(n)时间复杂度内将列表进行排序. import random data = [random. ...

  5. CF734F Anton and School 构造+数论

    正解:构造 解题报告: 先放下传送门QwQ 这题首先要知道一个结论:(x&y)+(x|y)=x+y 还是能理解的趴? 所以我们把bi+ci就能得到∑a+n*a[i] 然后我们就能成功求出∑a ...

  6. Nginx 使用总结

    一.使用 nginx 实现 灰度发布 灰度发布,现在是很多大项目的一个标配运维特性,我们可以将一个“新的版本代码”发布到集群中的少数几台(组)机器上,以便引入线上少量真实用 户进行测试,用于验证产品改 ...

  7. The adidas NMD Singapore is one of the brands top selling

    Like pointed out, we've two adidas NMD Singapore releases using the first arriving Blue and Black as ...

  8. bootstrap fileinput api翻译笔记

    bootstrap fileinput HTML标签属性 data-show-preview="false" // 是否显示预览区 multiple // 多文件 data-sho ...

  9. 协变返回类型---《C++必知必会》 条款 31

    一般来说,一个重写的函数与被它重写的函数具有相同的返回类型. 然而,这个规则对于“协变返回类型(covariant  return type)“的情形来说有所放松.也就是说,如果B是一个类类型,并且一 ...

  10. 002-字段不为null

    1.尽量不要在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引而进行全表扫描,强烈建议where涉及的列,不要留空,创建表时赋予初始值. 比如 select id from ...