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中用getMinutes()方法返回指定的分时刻
  • 原生Js实现按的数据源均分时间点幻灯片效果(已封装)
时间: 2018-03-26

原生Js实现按的数据源均分时间点幻灯片效果(已封装)

建议在Chrom,Firefox,Opera,Safari等标准浏览器中查看. Ie下没有阴影及圆角. 实现了根据源数据(样例中是一个JSON数据组)总条数, 均分出时间点以平滑向右动画方式显示在时间线上, 当鼠标划过时间点时, 显示对应的日期及标题. 鼠标划过事件, 充分考虑了用户体验, 当用户快速(无意识移动)从时间点上划过时, 并不触发相应事件. 相关的方法说明及使用, 请参见下面的注释或发评论, 同时也欢迎大家找bug并提交. Js核心代码点此查看样例 复制代码 代码如下: var JS

在JavaScript中用getMinutes()方法返回指定的分时刻

javascript Date.getMinutes()方法按照本地时间在指定日期返回分钟.通过getMinutes返回的值是0到59之间的一个整数. 语法 Date.getMinutes() 下面是参数的详细信息: NA 返回值: 在指定的日期,按照本地时间返回分钟. 例子: <html> <head> <title>JavaScript getMinutes Method</title> </head> <body> <sc

JavaScript中用getDate()方法返回指定日期的教程

按照本地时间的javascript date.getDate()方法返回月份的一天,在指定日期.由getDate返回的值是1到31之间的整数. 语法 Date.getDate() 下面是参数的详细信息: NA 返回值: 返回今天的日期和时间 例子: <html> <head> <title>JavaScript getDate Method</title> </head> <body> <script type="te

JavaScript中用toString()方法返回时间为字符串

此方法返回表示指定日期对象的字符串. 语法 Date.toString() 下面是参数的详细信息: NA 返回值: 返回表示指定日期对象的字符串 例子: <html> <head> <title>JavaScript toString Method</title> </head> <body> <script type="text/javascript"> var dateobject = new Da

JavaScript中用sort()方法对数组元素进行排序的操作

JavaScript数组sort()方法排序数组的元素. 语法 array.sort( compareFunction ); 下面是参数的详细信息: compareFunction : 指定一个函数,定义排序次序.如果省略,数组字典顺序排序. 返回值: 返回一个排序的数组 例子: <html> <head> <title>JavaScript Array sort Method</title> </head> <body> <s

在Python中用keys()方法返回字典键的教程

keys()方法返回在字典中的所有可用的键的列表. 语法 以下是keys()方法的语法: dict.keys() 参数 NA 返回值 此方法返回在字典中的所有可用的键的列表. 例子 下面的例子显示keys()方法的用法. #!/usr/bin/python dict = {'Name': 'Zara', 'Age': 7} print "Value : %s" % dict.keys() 当我们运行上面的程序,它会产生以下结果: Value : ['Age', 'Name']

简介JavaScript中getUTCMonth()方法的使用

javascript Date.getUTCMonth()方法返回按照通用时间在指定日期的月份.由getUTCMonth返回的值是0和11之间的整数对应的月份. 0代表一月,1代表二月,2表 示三月份,依此类推. 语法 Date.getUTCMonth() 下面是参数的详细信息: NA 返回值: 按照通用时间返回指定日期的月份. 例子: 下面的例子打印当前时间变量hrs的月份部分. <html> <head> <title>JavaScript getUTCMonth

简介JavaScript中valueOf()方法的使用

JavaScript的Boolean.valueOf()方法返回指定 Boolean对象的原始值. 语法 boolean.valueOf() 下面是参数的详细信息: NA 返回值: 返回指定Boolean对象的原始值. 例子: <html> <head> <title>JavaScript valueOf() Method</title> </head> <body> <script type="text/javasc

JavaScript中getUTCSeconds()方法的使用详解

javascript Date.getUTCSeconds()方法返回按照通用时间在指定日期的秒.通过getUTCSeconds返回的值是0到59之间的一个整数. 语法 Date.getUTCSeconds() 下面是参数的详细信息: NA 返回值: 按照通用时间返回在指定的日期的秒数. 例子: 下面的例子中打印当前时间给变量hrs的秒数部分. <html> <head> <title>JavaScript getUTCSeconds Method</title&

JavaScript中toString()方法的使用详解

JavaScript Boolean.toSource()方法返回表示对象的源代码的字符串. 注意:此方法不会在Internet Explorer中运行. 语法 boolean.toSource() 下面是参数的详细信息: NA 返回值 返回表示对象的源代码的字符串. 例子: <html> <head> <title>JavaScript toSource() Method</title> </head> <body> <scr

JavaScript的Date()方法使用详解

JavaScript的Date()方法返回今天的日期和时间,并且不需要任何对象被调用. 语法 Date() 下面是参数的详细信息: NA 返回值: 返回今天的日期和时间 例子: <html> <head> <title>JavaScript Date Method</title> </head> <body> <script type="text/javascript"> var dt = Date()