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事件会再次执行延时器
}