JavaScript基础 - 防抖与节流

意义： 提升程序执行效率, 减少计算资源的浪费, 优化用户体验。

节流 throttle

// 节流 throttle 

// 一段时间内，只执行一次某个操作，过了这段时间，还有操作的话，继续执行新的操作。
function throttle(fn, interval) {
  let timer = null;
  console.log('arguments',arguments)
  return function(){
    // 正在计时，直接返回
    if (timer) return;

    // 不在计时中,执行指定代码, 开始计时
    fn.apply(this, arguments); 
    
    //备注：因为用到了arguments，所以不能使用箭头函数
    // 注意理解这里的arguments， throttle返回函数时并没有执行

    timer = setTimeout(() => {
      timer = null;
    }, interval);
  };
}

// boxDOM.addEventListener("drag", function (e) {
//     console.log(arguments);
//   console.log(e.offsetX, e.offsetY);
// });

const boxDOM = document.querySelector(".box");
boxDOM.addEventListener(
  "drag",

  // 如果用户给我箭头函数呢？
  // 参数， 只在运行时传入!!
//   throttle(function (e) {
//     console.log(arguments);
//     console.log(e.offsetX, e.offsetY, " -- ", new Date().toISOString());
//   }, 1000)

  throttle((e) => {
    // console.log(arguments); //箭头函数内无法使用
    console.log(e.offsetX, e.offsetY, " -- ", new Date().toISOString());
  }, 1000)
);

防抖 debounce

// 防抖 debounce --------------------------

// 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
// 用户输入完毕的时候，才发送一次http请求
const inputDOM = document.getElementById("hInput");

function debounce(fn, interval) {
  let timer = null;
  return function () {
    if (timer) {
      // 重置计时器
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, interval);
  };
}

// inputDOM.addEventListener('input', ()=>{
//     console.log('发送搜索请求')
// })

inputDOM.addEventListener(
  "input",
  debounce(() => {
    console.log("发送搜索请求");
  }, 600)
);