真实事件 setTimeout 防抖 时间戳节流

表单事件与高频事件实验台

在同一个小表单里观察 inputchangeblurfocuskeydownsubmit;再用搜索框、滚动区和滑块对比直接执行、防抖和节流。

当前结论: 先输入姓名或搜索内容,事件日志会开始记录。

注册 / 搜索混合表单

每个控件都绑定真实 DOM 事件,提交时会阻止页面跳转。

form

事件日志

高频事件:滚动与拖动

滚动下面区域或拖动滑块。原始事件会密集触发,节流函数只在固定间隔通过一次。

高频触发次数
0

等待滚动或拖动

节流执行次数
0

每 320ms 最多通过一次

在这个区域滚动时,scroll 会连续触发。右侧计数器用真实时间戳判断是否放行节流处理。

滑块的 input 事件也很密集:拖动时浏览器会不断派发事件,适合演示节流。

节流常用于滚动监听、窗口尺寸变化、拖拽计算等场景,让页面不用为每一次原始事件都执行昂贵逻辑。

防抖和节流不是校验规则,它们只是控制函数执行频率。真正的表单规则仍然要在提交或输入处理里判断。

最后一次节流通过 --