防抖与节流的一些理解

防抖和节流都是为了减轻浏览器和服务器的压力，至于是使用防抖还是节流，就要根据具体业务来进行具体分析和使用。

防抖

防抖的作用就是触发事件后等待一定时间后执行一次方法，如果在该时间内再次触发事件，则会重新开始等待。

举个例子

function debounce(fn, delay) {
  var timeout = null;
  return function() {
   if(timeout !== null) 
    clearTimeout(timeout);
    timeout = setTimeout(()=>{
		fn.apply(this,arguments)
	}, delay);
  }
}
// 处理函数
function handle() {
    console.log(Math.random()); 
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

节流

顾名思议，多次触发事件的情况下，方法只会在规定的时间间隔内执行，也就是说，10秒内重复触发1000次事件，但是方法只会间隔两秒执行一次，10秒内一共执行5次方法。

var throttle = function(fun, delay) {
	  var startTime = Date.now();
	  let timer = null;
	  return function() {
	    var curTime = Date.now();
	    var remaining = delay - (curTime - startTime);
	    clearTimeout(timer)
	    if (remaining <= 0) {
	      fun.apply(this, arguments);
	        startTime = Date.now();
	    }else{
      	  timer = setTimeout(()=>{
      	  	fun.apply(this, arguments);
      	  },delay)
     	}
	}
}

function handle() {
      console.log(Math.random());
}
 window.addEventListener('scroll', throttle(handle, 1000));