节流与防抖

节流 ：在规定的时间内只触发一次

let time1 = null;

$('.box1').click(function () {

let time2 = new Date()

if (time2 - time1 >= 2000) {

time1 = new Date()

console.log('节流');

}

})

节流封装函数：

function throttle(fn, delay) {
  let flag = true;
  return function () {
     if (flag) {
        setTimeout(() => {
           fn.call(this)
           flag = true
        }, delay)
     }
  flag = false;
  }
}

防抖 ：触发后要停上一定的时间后再次触发

let time3 = null;

$('.box2').click(function () {

            let time4 = new Date();

            if (time4 - time3 >= 2000) {

                console.log('防抖');

            }

            time3 = new Date();

})

防抖封装函数：

function debounce(fn, delay) {
    let time = null;
    return function () {
      if (time !== null) {
            clearTimeout(time)
      }
      time = setTimeout(() => {
      // 需要改变this指向，否则input内容为空
      // input调用封装函数时，this指向的是调用者
          fn.call(this);
      }, delay)
    }
}