js中防抖和节流

js中防抖和节流

函数防抖

函数防抖(debounce)：在持续触发事件的情况下，事件只执行一次

boss.onclick = function(){
     clearInterval(bossTime);
         if(flag){
             num++;
         boss.innerHTML = num;
             flag = false;
         } else {
          bossTime = setTimeout(function(){
          	flag = true;
            },1000);
         }
     }

函数节流（定时器版）

函数节流(throttle)：在持续触发事件时，每隔一段时间执行一次

boss.onclick = function () {
	if (flag) {
		flag = false;
		bossTime = setTimeout(function () {
    		num++;
		boss.innerHTML = num;
			flag = true;
		clearTimeout(bossTime);
		}, 1000);
     }
 }

定时器版节流

function throttle(func, wait) {
 let timeout;
 return function() {
  let context = this;
  let args = arguments;
console.log(timeout);
  if (!timeout) {
   timeout = setTimeout(() => {
    timeout = null;
    func.apply(context, args)
   }, wait)
  }
 }
}

总结：

函数防抖：是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次
函数节流：是指一定时间内js方法只跑一次