中等可运行测试引导学习经典前端手写题

手写 debounce

防抖：等安静下来再执行

连续调用时，只在最后一次调用之后安静 wait 毫秒，执行一次 fn；执行时使用最后一次调用的 this 和参数。

规格 输入 / 输出 / 边界#手写题 #闭包 #定时器

开始引导 · 6 步去运行测试看规格与方案

先自己答，再看参考；进度只存本机

学习目标

能说清防抖和节流的区别，独立写出带闭包/this/参数处理的 debounce，并知道什么时候该补 cancel。

已完成 0 / 6 阶段

诊断

先分清：防抖不是节流

防抖和节流都能限制频率，它们的区别是什么？什么场景应该用防抖？

下面哪个场景最适合防抖？

建议先完成当前阶段（提示 / 检查 / 自评），再进入下一步；也可以直接跳过。

功能规格

输入

debounce(fn, wait) 返回一个包装函数；调用包装函数时可以传任意参数。

输出

连续调用时，只在最后一次调用之后安静 wait 毫秒，执行一次 fn；执行时使用最后一次调用的 this 和参数。

约束

不能依赖 lodash 等第三方库
fn 可以是普通函数，也可以作为对象方法被调用
wait 单位是毫秒
加分项：支持 cancel() 取消尚未执行的回调

示例

const d = debounce(fn, 100); d(1); d(2); d(3) → 100ms 后只执行一次 fn(3)
d(); 等待 100ms; d(); 再等 100ms → 执行两次

时间轴（一次连续调用的示意）

调用执行取消

d(1)0ms

d(2)20ms

d(3)40ms

执行 fn(3)140ms

方案对比

先看暴力写法，再看常见写法，最后看惯用写法——每一步都问自己：它解决了什么、还差什么。

暴力

不防抖：每次调用都立刻执行。它满足"能调用"这个最低要求，但完全没有"安静 wait 后再执行"的语义。

取舍：零成本，但只能作为对照；连续调用会执行多次。

暴力写法js1function debounce(fn, wait) {
2  return fn
3}

常见

用闭包保存 timer；每次调用先取消上一次，再安排新的定时器。只有最后一次调用的定时器能活到 wait。

取舍：满足大多数场景；但没有 cancel，组件卸载时无法主动取消，容易留下"幽灵执行"。

常见写法js1function debounce(fn, wait) {
let timer = null
return function (...args) {
  clearTimeout(timer)
  timer = setTimeout(() => fn.apply(this, args), wait)
}
7}

惯用

在常见方案上补 cancel；执行后把 timer 置空，避免"已经执行过，cancel 又触发"的状态歧义。

取舍：更完整；如果要 flush（立即执行挂起调用）还要再补一个方法。

惯用写法js1function debounce(fn, wait) {
let timer = null
function debounced(...args) {
  clearTimeout(timer)
  timer = setTimeout(() => {
    timer = null
    fn.apply(this, args)
  }, wait)
}
debounced.cancel = () => {
  clearTimeout(timer)
  timer = null
}
return debounced
15}

运行测试

3 个用例 · 浏览器 Worker

代码只在本机浏览器执行，不发送到服务器；超过 4 秒会终止。

编辑器加载中…

查看测试用例（3）

连续调用只执行一次期望：count === 1

(async () => {
  let count = 0
  const d = debounce(() => count++, 20)
  d(); d(); d()
  await new Promise((r) => setTimeout(r, 60))
  return count === 1
})()

执行时使用最后一次调用的参数期望：got === 3

(async () => {
  let got
  const d = debounce((v) => { got = v }, 20)
  d(1); d(2); d(3)
  await new Promise((r) => setTimeout(r, 60))
  return got === 3
})()

安静 wait 后可以再次触发期望：count === 2

(async () => {
  let count = 0
  const d = debounce(() => count++, 10)
  d()
  await new Promise((r) => setTimeout(r, 40))
  d()
  await new Promise((r) => setTimeout(r, 40))
  return count === 2
})()

← 返回手写题

功能规格

输入

debounce(fn, wait) 返回一个包装函数；调用包装函数时可以传任意参数。

输出

连续调用时，只在最后一次调用之后安静 wait 毫秒，执行一次 fn；执行时使用最后一次调用的 this 和参数。

约束

不能依赖 lodash 等第三方库
fn 可以是普通函数，也可以作为对象方法被调用
wait 单位是毫秒
加分项：支持 cancel() 取消尚未执行的回调

示例

const d = debounce(fn, 100); d(1); d(2); d(3) → 100ms 后只执行一次 fn(3)
d(); 等待 100ms; d(); 再等 100ms → 执行两次

时间轴（一次连续调用的示意）

调用执行取消

d(1)0ms

d(2)20ms

d(3)40ms

执行 fn(3)140ms

方案对比

先看暴力写法，再看常见写法，最后看惯用写法——每一步都问自己：它解决了什么、还差什么。

暴力

不防抖：每次调用都立刻执行。它满足"能调用"这个最低要求，但完全没有"安静 wait 后再执行"的语义。

取舍：零成本，但只能作为对照；连续调用会执行多次。

暴力写法js1function debounce(fn, wait) {
2  return fn
3}

常见

用闭包保存 timer；每次调用先取消上一次，再安排新的定时器。只有最后一次调用的定时器能活到 wait。

取舍：满足大多数场景；但没有 cancel，组件卸载时无法主动取消，容易留下"幽灵执行"。

常见写法js1function debounce(fn, wait) {
let timer = null
return function (...args) {
  clearTimeout(timer)
  timer = setTimeout(() => fn.apply(this, args), wait)
}
7}

惯用

在常见方案上补 cancel；执行后把 timer 置空，避免"已经执行过，cancel 又触发"的状态歧义。

取舍：更完整；如果要 flush（立即执行挂起调用）还要再补一个方法。

惯用写法js1function debounce(fn, wait) {
let timer = null
function debounced(...args) {
  clearTimeout(timer)
  timer = setTimeout(() => {
    timer = null
    fn.apply(this, args)
  }, wait)
}
debounced.cancel = () => {
  clearTimeout(timer)
  timer = null
}
return debounced
15}

运行测试

3 个用例 · 浏览器 Worker

代码只在本机浏览器执行，不发送到服务器；超过 4 秒会终止。

编辑器加载中…

查看测试用例（3）

连续调用只执行一次期望：count === 1

(async () => {
  let count = 0
  const d = debounce(() => count++, 20)
  d(); d(); d()
  await new Promise((r) => setTimeout(r, 60))
  return count === 1
})()

执行时使用最后一次调用的参数期望：got === 3

(async () => {
  let got
  const d = debounce((v) => { got = v }, 20)
  d(1); d(2); d(3)
  await new Promise((r) => setTimeout(r, 60))
  return got === 3
})()

安静 wait 后可以再次触发期望：count === 2

(async () => {
  let count = 0
  const d = debounce(() => count++, 10)
  d()
  await new Promise((r) => setTimeout(r, 40))
  d()
  await new Promise((r) => setTimeout(r, 40))
  return count === 2
})()