防抖和节流

对于防抖我看了其他人写的之后个人觉得实际应用中可能这样的。比如百度搜素框，我们每次输入字体的时候它就开始查询请求并显示出来了。但这样请求很频繁，消耗大。我想在我输入几秒后将所有文字收集再发送请求。这就是防抖吧。而节流就类似于，登录输入验证码，这个验证码获取只能在60秒之后才能再次获取

防抖

* function debounce(fn,delay){ var timer=null; return (...args)=>{ clearTimeout(timer); timer=window.setTimeout(()=>{ fn.apply(this,args) },delay) } } let input1=document.getElementById('input1'); let fn=debounce(function(e){ console.log(e.target.value); },2000); input1.addEventListener('input',fn); */

节流

function throttle(fn,delay){ timer=null; return (...args)=>{ if(!timer){ timer=setTimeout(() => { fn.apply(this,args); timer=null; }, delay); } } // 这里用到的是时间戳 /* let pre=Date.now(); return (...args)=>{ let now=Date.now(); let context=this; if(now-pre>=delay){ fn.apply(context,args) pre= Date.now(); } } */ // 这里用到的是定时器做节流 /* let timer = null; return funtion(){ let context = this; let args = arguments; if(!timer){ timer = setTimeout(function(){ func.apply(context, args); timer = null; }, delay); } } */ } let fn=throttle(function(e){ console.log(e.target.value); },2000) let input1=document.getElementById('input1'); input1.addEventListener('input',fn)

大致只能理解到这了