javascript性能优化之分时函数的介绍

 更新时间:2018年03月28日 14:17:42   转载 作者:KaRaoXake  
本篇文章主要介绍了javascript性能优化之分时函数的介绍,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

分时函数和函数节流的问题不一样,函数节流针对的事件不是用户主动调用的,前面已经提过了。

函数节流的原理是:延迟当前函数的执行,如果该次延迟还没有完成,那么忽略接下来该函数的请求。也就是说会忽略掉很多函数请求。

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

应用:

加入我们要在文档中添加1000个节点,可以利用timeChunk分时函数每200ms连续添加20个节点。

var arr = [];
for(var i = 1; i <= 1000; i++){
  arr.push(i)
}
var renderLists = timeChunk(arr,function(i){
  var div = document.createElement('div');
  div.innerHTML = i;
  document.body.appendChild(div);
},20);
renderLists(200);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Javascript的常规数组和关联数组对比小结

    Javascript的常规数组和关联数组对比小结

    关联数组虽然可以用字符串作下标,但是这个下标是不支持参数传值的,换言之,你需要什么就取什么,听起来很智能,实际上你取值仍然需要你手动去写下标的
    2012-05-05
  • js Canvas实现圆形时钟教程

    js Canvas实现圆形时钟教程

    这篇文章主要为大家详细介绍了HTML5 Canvas实现圆形时钟简易教程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • JavaScript实现添加、查找、删除元素

    JavaScript实现添加、查找、删除元素

    这篇文章主要汇总介绍了JavaScript实现添加、查找、删除元素的方法,十分的简单实用,有需要的小伙伴可以参考下。
    2015-07-07
  • 详解小程序之简单登录注册表单验证

    详解小程序之简单登录注册表单验证

    这篇文章主要介绍了小程序之简单登录注册表单验证,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • js中reverse函数的用法详解

    js中reverse函数的用法详解

    本篇文章主要是对js中reverse函数的用法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 微信小程序3D轮播实现代码

    微信小程序3D轮播实现代码

    这篇文章主要介绍了微信小程序3D轮播实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP

    深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP

    本章我们要讲解的是S.O.L.I.D五大原则JavaScript语言实现的第2篇,开闭原则OCP(The Open/Closed Principle )。
    2012-01-01
  • Javascript json object 与string 相互转换的简单实现

    Javascript json object 与string 相互转换的简单实现

    下面小编就为大家带来一篇Javascript json object 与string 相互转换的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 一组JS创建和操作表格的函数集合

    一组JS创建和操作表格的函数集合

    在用AJAX的时候,经常要用JS操作DOM,当涉及到数据列表的时候,那用表格比较多,这里写了组函数集合,专门用来操作表格,当然,目前还有很多不足,但是对一些简单操作还是很方便的。
    2009-05-05
  • JavaScript设计模式经典之工厂模式

    JavaScript设计模式经典之工厂模式

    工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类。接下来通过本文给大家介绍JavaScript设计模式经典之工厂模式,感兴趣的朋友一起学习吧
    2016-02-02

最新评论