必须在每次mousedown前先clearInterval(repeatTimer)，并在mouseup、mouseleave、touchend等所有松手/失焦事件中清除定时器；推荐改用递归setTimeout以避免执行堆积，且需统一处理PC与移动端事件生命周期。
长按按钮时如何避免重复创建定时器
直接在 mousedown 里调用 setInterval 而不清理，会导致每次点击都叠加一个新定时器，数值狂飙。关键不是“启动”，而是“确保只有一个活跃定时器”。
- 用一个变量（比如
repeatTimer）存当前定时器 ID，每次mousedown前先clearInterval(repeatTimer) -
mouseup和mouseleave都必须清除定时器——用户移出按钮再松手，也会漏掉停止逻辑 - 移动端还要监听
touchstart/touchend，且需调用preventDefault()防止滚动干扰
为什么 setTimeout 递归比 setInterval 更可控
setInterval 固定间隔执行，但若操作耗时（比如触发 Vue 更新或 DOM 重排），实际间隔会拉长甚至堆积；而递归 setTimeout 总是等上一次执行完才设下一次，节奏更稳。
- 示例写法：
let repeatTimer = null;<br>const startRepeat = () => {<br> increment(); // 或 decrement()<br> repeatTimer = setTimeout(startRepeat, 100);<br>}; - 首次触发建议加延迟（如 300ms），模拟“短按单次、长按连续”的体验，避免误触
- 初始延迟和后续间隔可不同：前 300ms 等待，之后每 80ms 执行一次，更符合人机交互直觉
input type="number" 的原生 spinner 为什么不适用
浏览器自带的上下箭头（spinner）无法监听长按行为，且其加减逻辑不可控、无事件钩子、移动端常被隐藏。想自定义响应节奏、加防抖、联动其他状态，必须弃用原生控件，手写按钮 + 状态管理。
- 禁用原生 spinner：CSS 加
appearance: none或覆盖伪元素，但仅视觉隐藏，功能仍存在 - 真正隔离：用
<button>控制一个独立的value变量，再同步到<input>的value属性 - 注意
input元素的change事件不会因 JS 修改value属性而触发，需手动dispatchEvent(new Event('change'))
移动端 touch 事件的坑：click 延迟与 preventDefault
只绑 click 无法识别长按，而只绑 touchstart 不加 preventDefault()，iOS Safari 会触发双击缩放或页面滚动，打断操作。
立即学习“前端免费学习笔记（深入）”；
- 必须同时监听
touchstart和touchend，并在这两个 handler 里调用e.preventDefault() - 不要在
touchstart里直接启动定时器，先记录时间戳，等touchend判定是否为长按（>300ms）再决定是否启用连续模式 - PC 和移动端逻辑最好封装成统一函数，用
'ontouchstart' in window判断环境，避免写两套事件绑定
