什么是防抖和节流？面试官问这题，大家会不？

一、先搞懂：为啥需要这俩东西？

比如你刷短视频时快速滑动屏幕，手机用不用 “每滑 1 毫米就重新算一次画面”？肯定不用啊！要是这么干，手机立马变卡、耗电快。

前端也一样：像输入框实时搜东西（你输 “苹”“苹果”）、窗口放大缩小、滚动页面，这些操作会 “疯狂触发代码”。防抖和节流就是用来 “拦着” 这些疯狂操作，让代码别瞎忙活 ——核心就是：省劲儿、不卡顿。

二、防抖：“等你彻底停下，我才干活”

用你每天都可能遇到的 “电梯关门” 举例：你进电梯后，电梯会说 “等 10 秒再关门”。这 10 秒内如果又有人按电梯进来，电梯会 “把 10 秒倒计时归零”，再等 10 秒。直到没人再进来、10 秒走完，才关门走。

这就是防抖！只要你还在 “触发动作”（有人进电梯），我就不干活（不关门）；只有你彻底停下（没人再进），等够时间，我才执行一次。

前端场景：搜东西

你在淘宝搜 “鞋子”，输 “鞋” 的时候，不用马上发请求；输 “鞋子”，也不用马上发。等你停笔 1 秒（不输入了），再发请求搜 —— 这样不会因为你打字快，一下子发十几次请求，又卡又费流量。

防抖代码

// 防抖函数：tt是函数名，fn是要干的活，delay是等多久（毫秒）
function tt(fn, delay) {
  let time = null; // 相当于“电梯的倒计时器”
  return function(...args) {
    if (time) { // 只要有人新进来（再次触发）
      clearTimeout(time); // 就把之前的倒计时清掉
    }
    // 重新定一个新倒计时：等delay毫秒后再干活
    time = setTimeout(() => {
      fn.apply(this, args); // 执行要干的活（比如发搜索请求）
      time = null; // 干完活把倒计时器清空
    }, delay);
  };
}

// 怎么用？拿“搜索”举例
// 1. 先写“要干的活”：比如发搜索请求
function search(keyword) {
  console.log("发请求搜：", keyword); // 实际项目里这里会写真正的搜索逻辑
}

// 2. 用防抖函数tt包装search，设定“停输500毫秒再搜”
const debouncedSearch = tt(search, 500);

// 3. 给输入框加事件：打字时触发包装后的函数
const inputBox = document.querySelector("input"); // 找页面里的输入框
inputBox.addEventListener("input", function(e) {
  debouncedSearch(e.target.value); // 把输入的内容传给搜索函数
});

机-会

技术大厂，前端-后端-测试，全国均有机-会，感兴趣可以试试。待遇和稳定性都还不错~

三、节流：“不管你咋动，我到点就干活”

还是电梯，但换个规则：电梯每 10 秒必走一趟。哪怕这 10 秒内一直有人进电梯，到 10 秒就关门走；走了之后再等 10 秒，下一趟再走。不管你中间按多少次电梯，它只按 “10 秒一次” 的节奏来。

这就是节流！不管你是不是一直在触发（按电梯），我都按固定时间（10 秒）执行一次，多一次都不干。

前端场景：刷朋友圈加载更多

你往下滚朋友圈，不用每滚 1 厘米就查 “要不要加载新内容”。设定 “每 300 毫秒查一次”—— 哪怕你滚得飞快，也只按 300 毫秒的节奏判断，既不耽误加载，又不浪费资源。

节流代码（直接用你给的 `throttled1` 函数）

这个 throttled1 函数就是现成的节流工具，直接用：

// 节流函数：throttled1是函数名，fn是要干的活，delay默认500毫秒（可改）
function throttled1(fn, delay = 500) {
  let oldtime = Date.now(); // 记录“上一次干活的时间”（初始是当前时间）
  return function(...args) {
    let newtime = Date.now(); // 每次触发时，拿“现在的时间”
    // 如果“现在 - 上次干活时间”≥delay，就执行一次
    if (newtime - oldtime >= delay) {
      fn.apply(null, args); // 执行要干的活（比如查加载）
      oldtime = Date.now(); // 干完活，把“上次时间”更改为现在
    }
  };
}

// 怎么用？拿“滚动加载”举例
// 1. 先写“要干的活”：比如查要不要加载新内容
function checkLoadMore() {
  console.log("看看要不要加载新朋友圈～"); // 实际项目里这里写判断逻辑
}

// 2. 用节流函数throttled1包装，设定“每300毫秒查一次”
const throttledLoad = throttled1(checkLoadMore, 300);

// 3. 给页面加滚动事件：滚动时触发包装后的函数
window.addEventListener("scroll", throttledLoad);