原生-事件节流

1、节流逻辑分解

/* 
	设置在input输入时，间隔一定时间后再进行判断设置等内容，在间隔的时间内不再做任何处理	 
*/

2、代码实现

var text = document.querySelector("input") ,
	ids = 0 ;	
			//用来设置延时定时的初始值
text.addEventListener("input" , inputHandler) ;	
			//给文本框添加input事件

function inputHandler(e){
	if(ids) return ;	
			//如果ids为真(即ids===1)时,跳出
	ids = setTimeout(textHandler , 500 , this) ;
			//1、设置延时并创建执行函数textHandler
			//2、延时500ms执行
			//3、将this指向text参数传入函数中
			//4、给一个ids返回值来确定ids是0还是1,然后是0则执行函数
}

function textHandler(elem){
			//elem接收this
	console.log(elem.value) ;	
			//打印input输出的值
	clearTimeout(ids) ;	
			//取消延时定时器
	ids = 0 ;	
			//将ids设置0,再次输入时,进入input事件会再次执行延时器
}