js 防抖和节流函数

防抖：用户多次触发同一个方法最后整合为一次，如下面函数:

function debounce(fn,delayTime){
  let time = null;
  return function (){
    if(time){
      clearInterval(time)
    }
    time = setTimeout(fn, delayTime);
  }
}
const test = function (){
  console.log("23333");
}
const runTest = debounce(test, 3000);
runTest();
runTest();
runTest();

delayTime时间结束之前，无论触发多少次函数，最后只会执行一次

节流：在一定时间内只执行一次函数，代码如下：

function throttle (fn,delay){
  let prevTime = 0;
  return function(){
    let nowTime = Date.now()
    if(nowTime - prevTime > delay){
      fn.apply(this,arguments);
        prevTime = nowTime;
    }
  }
}
const test = function () {
  console.log("2333");
};

const run = throttle(test, 3000);
run();
run();
run();

主要逻辑是比较本次触发时间和上一次触发时间的差值，如果相差大于delay的值就再执行一次，上面这种方法是函数周期前执行，就是第一次执行后隔3秒再执行下次

function throttle (fn,delay){
  let prevTime = Date.now();
  return function(){
    let nowTime = Date.now()
    if(nowTime - prevTime > delay){
      fn.apply(this,arguments);
        prevTime = nowTime;
    }
  }
}
const test = function () {
  console.log("2333");
};
const run = throttle(test, 3000);
setTimeout(run,3000)

这种是周期后执行，第一次执行是3秒后执行