防抖和节流

我这篇2分钟就能看完，留下来看看再走✌️

防抖：

当一个函数连续触发，只执行最后一次（记忆点🚩）。

实现：内部设置一个定时器，前面的多次点击会清除定时器，重新计时⌛️。直到最后一次点击，会延迟设置的时间执行一次函数。

// fn是你要调用的函数，delay是防抖的时间
function debounce(func, delay) {
  // debounceTimer是一个定时器
  let debounceTimer;
  // 返回一个闭包函数，用闭包保存debounceTimer确保其不会销毁，重复点击会清理上一次的定时器
  return function() {
    // 调用一次就清除上一次的定时器，重新计时⌛️
    clearTimeout(debounceTimer);
    // 开启这一次的定时器
    debounceTimer = setTimeout(() => {
      // 这里使用了apply改变this指向，目的是谁调用指向谁。若不改变this指向，则会指向fn定义环境
      func.apply(this, arguments);
    }, delay);
  };
}

节流：

实现： 设置一个变量存储最后一次执行的时间（记忆点🚩），如果当前执行时间和最后执行时间差值大于设置的延迟时间，就会执行。执行后更新最后一次执行时间。
个人思考： 节流如果满足条件（这一次执行距离上次执行已经过了设置的延迟时间），不需要等一个延迟后执行，是立即执行的。而防抖是每次都有延迟的（坏的很，故意等你一会儿，看你还点不，点了就重新等）

// fn是你要调用的函数，delay是节流的时间段
function throttle(func, delay) {
  // lastCall存储最后一次执行的时间
  let lastCall = 0;
  // 也是和防抖一样的闭包形式
  return function() {
    // 获取当前执行的时间now
    const now = new Date().getTime();
    // 如果当前执行时间和最后执行时间差值大于设置的延迟时间，就会执行
    if (now - lastCall >= delay) {
      // 执行想调用的函数
      func.apply(this, arguments);
      // 执行后，更新最后一次执行的时间
      lastCall = now;
    }
  };
}

合并使用

// 两个直接嵌套使用就可以
const debouncedThrottledFunction = debounce(throttle(func, delay), delay);

即防抖又节流，无敌了👍

恭喜🎉又学了一个知识

你看，理解比硬记要快很多吧，而且也不容易忘

写在最后：加油，我也是个前端小白，会记录一些自己遇到的知识点在【特别通俗篇】，也是我自己理解学习知识点的记录，如有错误也希望大佬们指正❤️