防抖和节流

防抖和节流函数

窗口的resize、scroll、输入框内容校验等操作时，如果这些操作处理函数是频繁数据请求，重渲染等操作时，无限制的触发事件，会加重浏览器的负担。使用deboune(防抖)和和throttle（节流）的方式来减少触发的频率，减轻负担，又不影响用户体验。
一、防抖（debounce)
在事件触发n秒后再执行回调，如果在这n秒又被触发，则重新计时。

//input输入触发事件
input.oninput= debounce(function(){
	//回调函数
    console.log(input.value)
},1000)

function debounce(callback,Time) {
   let timer = null;
   return function () {
      // 存储调用它的this
      let _this = this;
      // 每次进去时间未结束，重新计时
      clearTimeout(timer);
      timer = setTimeout(function () {
         // 改变this
         callback.call(_this);
      }, Time)
   }
}

二、节流(throttle)
在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

let p = document.getElementsByTagName('p')[0];
let btn = document.getElementsByTagName('button')[0];

btn.onclick= throttle();

function throttle(){
    var lastTime=0; 
    return function(){
         var sum;
         var nowTime=new Date();
         if(nowTime - lastTime >= 1000){
              sum=+p.innerHTML;
              p.innerHTML=sum+1
              lastTime=nowTime;
         }
    }
}

按钮绑定的事件频繁点击触发，在一秒以内只生效一次。