【Es6&防抖】

防抖特性

原理 ：定时器或延时器；

		
	var content = document.getElementById("content");
		var num = 1;
		function count(){
			content.innerHTML = num++;
		}
		content.onmousemove = count;
		let times;
		content.onmousemove = function (){
			clearTimeout(times);
			let obj = times;
			times = setTimeout(()=>{
				times = null;
			},1000)
			console.log(obj);
			if(!obj){
				content.innerHTML = num++;
			}
		};

方法	作用
constructor	内部原型属性，可以通过代码重写
instanceof	JavaScript操作符，会在原型链中的构造器中搜索，找到则返回true，否则返回false只作用于对象或数组

操作方法

		
		var arr = [1,2,3];
		var arr1 = new Array();
		var arr2 = {};
		var arr3 = function(){};
		var arr4 = 10;
		var arr5 = "abc";
		var arr6 = false;
		console.log(arr.constructor());---数组
		console.log(arr1.constructor());
		console.log(arr2.constructor());
		console.log(arr3.constructor());
		console.log(arr4.constructor());
		console.log(arr5.constructor());
		console.log(arr6.constructor());
		console.log(typeof arr);
		console.log(typeof arr1);
		console.log(typeof Array);
		console.log(arr instanceof Array);
		console.log(arr2 instanceof Object);
		console.log(arr3 instanceof function(){});
		console.log(arr4 instanceof Number);
		console.log(arr5 instanceof String);
		console.log(arr6 instanceof Boolean);
		

防抖

• 短时间内多次触发同一事件，只执行最后一次，或只执行最开始的一次。

示例

#content{
  		height:150px;
  		line-height:150px;
  		text-align:center; 
  		color: #fff;
  		background-color:#ccc;
  		font-size:80px;
  	}

<div id="content" ></div>

只执行最后一次

var content = document.getElementById("content");
var num = 1;
 content.onmousemove = function (){
		 	let obj = times;
		 	clearTimeout(times);
		 	times = setTimeout(()=>{
		 		times = null;
		 	},1000)
		 	if(!obj){
		 		console.log(typeof !obj);
		 		content.innerHTML = num++;
		 	}
		 };

只执行最开始的一次

var content = document.getElementById("content");
var num = 1;
let times;
content.onmousemove=function(){
	clearTimeout(times);
	let obj=times;
	time=setTimeout(()=>{
		time=null;
	},1000)
	if(!obj){
		content.innerHTML=num++;
	}
};

节流

• 如果持续触发同一事件，每隔一段时间只执行一次函数。

示例

#content{
  		height:150px;
  		line-height:150px;
  		text-align:center; 
  		color: #fff;
  		background-color:#ccc;
  		font-size:80px;
  	}

<div id="content" ></div>

延时器版

var content = document.getElementById("content");
		var num = 1;
		var time;
		content.onmousemove = function(){
			if(!time){
				time = setTimeout(()=>{
					time = null;
					content.innerHTML = num++;
				},1000)
			}
		}

时间戳版

var content = document.getElementById("content");
		var num = 1;
		var timeNew = 0;
		content.onmousemove = function(){
			var timeOld = Date.now();
			if(timeOld-timeNew>1000){
				timeNew = timeOld;
				content.innerHTML = num++;
			}
		}