在实际的前端开发工作中，防抖与节流绝对是高频场景中的常客，尤其是处理滚动事件、输入框实时响应、窗口缩放这类高频操作时，几乎可以说是每位开发者绕不开的必备工具。如何借助通义灵码快速生成这些高效函数，同时确保代码无 Bug，其实有一套相对明确的方法论。注意了，这里面有几个关键点，如果踩坑，后果往往很直接——要么防抖失效，要么内存泄漏找上门来。

通义灵码中快速生成防抖函数

在通义灵码中输入一句自然语言指令，比如“写一个带取消功能的防抖函数，延迟500毫秒，支持 this 绑定和参数透传”，它会直接输出一段可运行的 JavaScript 代码。这个生成过程几乎是一瞬间的事。

代码生成出来后，按下 Tab 键或者点击「插入」，就能自动粘贴到编辑器光标处。这里有个大忌——千万不要手动去改闭包变量名，比如那个 timer 或者 lastTime。一旦改动，多次调用时定时器就无法正常清除，防抖效果也就形同虚设。

如果生成的结果里没有带上 cancel 方法，也很简单：追加一句提示——“请给这个防抖函数加上 cancel 钩子，能手动清空未执行的定时器”。通义灵码通常一次就能补全成功。

通义灵码中生成节流函数的两种可靠写法

节流比防抖更容易因为实现方式不同而导致行为偏差。所以这里必须明确告诉通义灵码，你到底要的是哪一种。

方法一：时间戳版（推荐用于 scroll / resize 等高频事件）

输入指令：“用时间戳实现节流函数，保证每800毫秒最多执行一次，首次触发立即执行”。

方法二：定时器版（适合 mousemove 拖拽场景）

输入指令：“用 setTimeout 实现节流，第一次触发立刻执行，之后800毫秒内重复触发不响应，800毫秒后恢复”。

这两个版本底层逻辑完全不同。时间戳版依赖 Date.now() 做时间对比，没有定时器残留的问题。而定时器版需要维护一个 timer 引用，如果忘记在回调执行完后把它置 null，连续触发就会堆积出多个 setTimeout，最终导致行为失控。

把通义灵码生成的代码接入真实事件

生成代码只是第一步，接入真实业务场景时，流程才真正进入关键环节。

第一步：把生成的 debounce 或 throttle 函数复制出来，粘贴到项目 utils 目录下的 tools.js 中。

第二步：在业务文件顶部用 import { debounce } from '@/utils/tools.js' 引入。

第三步：绑定 input 事件时，一个常见的错误写法是 input.addEventListener('input', () => debounce(fn, 300)(e) )。这样做每次触发都会新建一个防抖函数实例，timer 无法跨次共享，防抖的效果也就彻底失效了。

正确的做法是先创建防抖实例，再绑定事件：

const handleInput = debounce((e) => { console.log(e.target.value) }, 300);

input.addEventListener('input', handleInput);

第四步：在滚动加载这类场景中，节流函数必须在页面卸载前移除监听器。否则 timer 会持续持有 DOM 引用，导致内存泄漏的问题。这一点在单页面应用里尤其需要留意。