分时函数

在某些用户操作中会有些严重影响页面性能,例如:同一时间动态创建大量节点,想一想如果当类似于qq的好友列表中有大量好友,每一个好友占据一个节点,需要大量在页面上添加渲染出来时,假如有10000个同时加载,页面肯定会吃不消会影响性能的.

就像这样:
 

<div id="inner"></div>

	/**
      parentName:容器节点对象
      tim:时间间隔
      num:插入节点数
      elements:插入数据(数组)
      */
	function add(parentName,elements){
		for(let i=0;i<elements.length;i++){
			creatEle(parentName,elements[i]);
		}
	}
	/*
	elementName:创建标签名
	*/
	function creatEle(parentName,elementName){
		console.log('创建')
		var name = document.createElement(elementName);
		name.innerHTML = '哈';
		parentName.appendChild(name);
	}
	var parentName = document.getElementById('inner');
  add(parentName,['h1','h2','h3','h4','h5'])

上面数据数组只添加了 5个并没有添加10000个领会精神~

由此便有了今天所介绍的

分时函数

将创建10000个节点的工作分化开,即原本需要在1秒钟内创建10000个节点的工作分成在每隔100ms中创建10个,甚至1秒钟创建1个.

以下是封装后的代码可以动态控制时间间隔和单位时间间隔内添加的节点数.

	/**
		parentName:容器节点对象
		tim:时间间隔
		num:插入节点数
		elements:插入数据(数组)
		*/
		function add(parentName,elements,tim,num){
			console.log('插入1')
			var index = 0;
			var	t;
			var	ind = index;
			var f = function(){
				console.log('插入2')
				for(let i=ind;i<ind+num;i++){
					var elementName = elements.shift();
					creatEle(parentName,elementName);
					index = i;
				}
			}
			return function(){
				console.log('插入3')
				t = setInterval(function(){
				if(elements.length == 0){
					console.log('插完')
					return clearInterval(t)
				}
				f();
				},tim)
			}
		}
		/*
		elementName:创建标签名
		*/
		function creatEle(parentName,elementName){
			console.log('创建')
			var name = document.createElement(elementName);
			name.innerHTML = '哈';
			parentName.appendChild(name);
		}
	

		var parentName = document.getElementById('inner');
		console.log(parentName)
		add(parentName,['h1','h2','h3','h4','h5'],3000,1)()