JavaScript设计模式与开发实践:分时函数

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)
    }
}
时间: 2024-10-15 05:16:56

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

JavaScript 设计模式与开发实践读书笔记 http://www.open-open.com/lib/view/open1469154727495.html

JavaScript 设计模式与开发实践读书笔记 最近利用碎片时间在 Kindle 上面阅读<JavaScript 设计模式与开发实践读书>这本书,刚开始阅读前两章内容,和大家分享下我觉得可以在项目中用的上的一些笔记. 我的 github 项目会不定时更新,有需要的同学可以移步到我的 github 中去查看源码: https://github.com/lichenbuliren/design-mode-notes 1.currying 函数柯里化 currying 又称 部分求值 .一个 cu

《JavaScript设计模式与开发实践》读书笔记之观察者模式

1.<JavaScript设计模式与开发实践>读书笔记之观察者模式 观察者模式定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. JavaScript中通常采用事件模型替代传统的观察者模式 1.1 逐步实现观察者模式 以客户看房为例 首先指定谁充当发布者,如售楼处 然后给发布者添加一个缓存列表,用于存放回调函数以便通知订阅者.这里为了让订阅者只接收自己感兴趣的消息,增加一个标识key 最后发布消息时候,发布者遍历缓存列表,依次触发里面存放的订阅者的回

JavaScript设计模式与开发实践 – 观察者模式 http://web.jobbole.com/87809/

概述 观察者模式又叫发布 – 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做发布者).发布者的状态发生变化时就会通知所有的订阅者,使得它们能够自动更新自己. 观察者模式的使用场合就是:当一个对象的改变需要同时改变其它对象,并且它不知道具体有多少对象需要改变的时候,就应该考虑使用观察者模式. 观察者模式的中心思想就是促进松散耦合,一为时间上的解耦,二为对象之间的解耦.让耦合的

【读书】JavaScript 设计模式与开发实践

2016.08.30 <JavaScript 设计模式与开发实践> 曾探 人民邮电出版社 2016年5月第1版 p13 找到变化的部分并封装之,以使得容易替换:而剩下的就是不变的部分. P49 函数柯里化(currying)的作用是多次收集参数,然后作为数组传给处理函数再一次执行. 其意义在于预处理--将预处理的流程放到一个函数里会更为清晰可控. P57 惰性加载函数 在函数内部重写引用函数的外部变量的引用,从而在第一次"调用"此变量后,此变量就指向新的正确的函数. p84

【摘】JavaScript设计模式与开发实践--单例模式

本文章所有内容均摘自<Javascript设计模式与开发实践>一书(有兴趣的可以购买),加入了一点点自己的理解,写这篇文章的目的是,加强自身对设计模式的理解,以及对于没有接触过这一块的入门者的参考. 阅读本章内容,需要具备Javascript面向对象的知识,否则阅读起来可能会些许困难. 设计模式 单例模式 策略模式 代理模式 迭代器模式 发布-订阅模式 命令模式 组合模式 模板方法模式 享元模式 职责链模式 中介者模式 装饰者模式 状态模式 适配器模式 单例模式 单例模式的定义:保证一个类仅有

JavaScript设计模式与开发实践——JavaScript的多态

"多态"一词源于希腊文polymorphism,拆开来看是poly(复数)+ morph(形态)+ ism,从字面上我们可以理解为复数形态. 多态的实际含义是:同一操作作用于不同的对象上面,可以产生不同的解释和不同的执行结果.换句话说,给不同的对象发送同一个消息的时候,这些对象会根据这个消息分别给出不同的反馈. 从字面上来理解多态不太容易,下面我们来举例说明一下. 主人家里养了两只动物,分别是一只鸭和一只鸡,当主人向它们发出"叫"的命令时,鸭会"嘎嘎嘎&q

JavaScript设计模式与开发实践 – 观察者模式

概述 观察者模式又叫发布 – 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做发布者).发布者的状态发生变化时就会通知所有的订阅者,使得它们能够自动更新自己. 观察者模式的使用场合就是:当一个对象的改变需要同时改变其它对象,并且它不知道具体有多少对象需要改变的时候,就应该考虑使用观察者模式. 观察者模式的中心思想就是促进松散耦合,一为时间上的解耦,二为对象之间的解耦.让耦合的

JavaScript设计模式与开发实践【第一部分】

今天开始阅读<JavaScript设计模式与开发实践>,对于设计模式的学习一直渴望已久. 设计模式的定义是:在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案. 其实平时在工作中不知不觉在使用某些设计模式,只是我们不知道而已. 动态类型语言和静态类型语言 静态类型语言在编译时便已确定变量的类型,而动态类型语言的变量类型要到程序运行的时 候,待变量被赋予某个值之后,才会具有某种类型. 静态类型语言的优点首先是在编译时就能发现类型不匹配的错误,编辑器可以帮助我们提前 避免程序在运行期间有可

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

上部分主要介绍高阶函数的常见形式,本部分将着重介绍高阶函数的高级应用. 1.currying currying指的是函数柯里化,又称部分求值.一个currying的函数会先接受一些参数,但不立即求值,而是继续返回给另一个函数,通过闭包存储起来.等到函数被真正需求要求值的时候,将之前传入的参数统一起来求值.例如,我们要计算一个月的开销,我们并不需要计算每天具体花了多少,而是需要计算月底总共花掉多少,也就是说,实际上我们只需要在月底计算一次.所以每个月的前29天,我们都只需要保存好当天的开销,到30

javascript设计模式与开发实践阅读笔记(3)——高阶函数的其他应用

高阶函数的其他应用 1.currying 函数柯里化,又称部分求值,一个currying 的函数首先会接受一些参数,接受了这些参数之后,该函数并不会立即求值,而是继续返回另外一个函数,刚才传入的参数在函数形成的闭包中被保存起来.待到函数被真正需要求值的时候,之前传入的所有参数都会被一次性用于求值. var cost = (function(){ var args = []; return function(){ if ( arguments.length === 0 ){ var money =