web端在进行大量DOM数据插入的时候,如果一次性插入上千条数据,浏览器吃不消会出现卡顿假死的情况,代码如下:

var arr = [];
for(var i = 0; i < 1000; i++){
arr.push(i);
} var loadData = function(data){
for(var i = 0, l = data.length; i < l; i++){
var elem = document.createElement('div');
div.innerHTML = i;
document.body.appendChild(div);
}
}; loadData(arr); //创建timeChunk()函数分批插入DOM
var timeChunk = function(data, fn, count, interval ){) //data数据 fn执行的逻辑函数 count一次插入的数量 interval分批执行的时间
var obj,t;
var len = arr.length;
var start = function(){
for(var i = 0; i < Math.min(count || 1, arr.length), i++){
var obj = arr.shift();
fn(obj);
}
};
return function(){
t = setInterval(function(){
if(arr.length === 0){
return clearInterval(t);
}
}, interval)
}
}

JavaScript设计模式与开发实践:分时函数的更多相关文章

  1. JavaScript设计模式与开发实践——读书笔记1.高阶函数(上)

    说来惭愧,4个多月未更新了.4月份以后就开始忙起来了,论文.毕设.毕业旅行等七七八八的事情占据了很多时间,毕业之后开始忙碌的工作,这期间一直想写博客,但是一直没能静下心写.这段时间在看<Java ...

  2. 《JavaScript设计模式与开发实践》读书笔记-基础知识

    笔记内容多摘录自<JavaScript设计模式与开发实践>(曾探著),侵删. 面向对象的JavaScript 1. 动态需要类型和鸭子类型 鸭子类型 如果它走起路来像鸭子,叫起来也是鸭子, ...

  3. 《JavaScript设计模式与开发实践》整理

    最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...

  4. JavaScript设计模式与开发实践 - 观察者模式

    概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...

  5. JavaScript设计模式与开发实践 - 策略模式

    引言 本文摘自<JavaScript设计模式与开发实践> 在现实中,很多时候也有多种途径到达同一个目的地.比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 如果没有时间但 ...

  6. JavaScript设计模式与开发实践 - 单例模式

    引言 本文摘自<JavaScript设计模式与开发实践> 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返 ...

  7. 《Javascript设计模式与开发实践》--读书笔记

    第2章 this call apply bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用. bind( ...

  8. 《javascript设计模式与开发实践》--- (单一职责原则)

    看的这本书叫<JavaScript设计模式与开发实践> 先规划一下看书的顺序,基础知识我已经大概的浏览了一遍了,没有留下笔记,以后有时间还会补上.本来打算顺着看的.但是我感觉我很难短时间内 ...

  9. JavaScript设计模式与开发实践——读书笔记1.高阶函数(下)

    上部分主要介绍高阶函数的常见形式,本部分将着重介绍高阶函数的高级应用. 1.currying currying指的是函数柯里化,又称部分求值.一个currying的函数会先接受一些参数,但不立即求值, ...

  10. 《javascript设计模式与开发实践》读书笔记之函数,this,闭包

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

随机推荐

  1. oracle入门(8)——实战:支持可变长参数、多种条件、多个参数排序、分页的存储过程查询组件

    [本文介绍] 学了好几天,由于项目需要,忙活了两天,写出了个小组件,不过现在还只能支持单表操作.也没考虑算法上的优化,查询速度要比hibernate只快了一点点,可能是不涉及多表查询的缘故吧,多表的情 ...

  2. Mysql数据库常用操作语句大全

    零.用户管理: 1.新建用户: >CREATE USER name IDENTIFIED BY 'ssapdrow'; 2.更改密码: >SET PASSWORD FOR name=PAS ...

  3. Jmeter(五)mysql的增删改查

    一.导入jdbc的jar包,因为jmeter本身不能直接连接mysql,所以需要导入第三方的jar包,来连接mysql jar包下载地址:https://pan.baidu.com/s/17qQZPF ...

  4. POJ3254:Corn Fields(状压dp第一发)

    题目:http://poj.org/problem?id=3254 直接上代码吧,刚开始做时主要的问题就是看不懂二进制,有个博客写的太好了,就直接把题解复制在下面了. #include <ios ...

  5. vim使用winmanager整合nerd tree和taglist

    winmanager插件安装 • 插件简介 winmanager is a plugin which implements a classical windows type IDE in Vim-6. ...

  6. Python误区之strip,lstrip,rstrip

    最近在处理数据的时候,想把一个字符串开头的“)”符号去掉,所以使用targetStr.lstrip(")"),发现在 将处理完的数据插入到数据库时会出现编码报错,于是在网上搜到了这 ...

  7. Linux系统——rpm命令

    (1)查看操作系统名字.版本cat /etc/redhat-release 查看系统内核kernel的版本号uname -r查看操作系统位数uname -m (2)rpm命令rpm 参数 软件名-q ...

  8. SQL Server WITH ROLLUP、WITH CUBE、GROUPING语句的应用

    CUBE:CUBE 生成的结果集显示了所选列中值的所有组合的聚合. ROLLUP:ROLLUP 生成的结果集显示了所选列中值的某一层次结构的聚合. GROUPING:当行由 CUBE 或 ROLLUP ...

  9. iClap:更智能的场景化工作方式

    8月31日,移动互联网企业运营解决方案整合平台DevStore团队正式推出新品——产品管理系统iClap,iClap集成了智能任务管理.Bug跟踪.简单发布.人才培养等功能,同时推出普通版和旗舰版两个 ...

  10. Spring-1-I 233 Matrix(HDU 5015)解题报告及测试数据

    233 Matrix Time Limit:5000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Descript ...