代码轮必考。看你闭包用得溜不溜,也考"最后一次为准"vs"限流"的UX取舍。
防抖:最后一次调用N ms后才执行。调用不停就永远不执行。场景:输入搜索(用户停下才查)、resize结束。
节流:每N ms最多执行一次。首次立即或间隔末,按变种定。场景:scroll监听、mousemove、限速轮询。
防抖实现:闭包存timerId,每次调用清旧的设新的。
节流实现:闭包存lastCallTime,now-last>=interval才执行。
边角:leading/trailing、cancel方法(清理)、防抖maxWait(至少每max ms跑一次)。
防抖是"等安静",节流是"限速率"。搜索框我防抖300ms——用户停下才发请求。滚动动画或粘顶逻辑我节流16ms(约60fps)——手势期间要持续更新,不能沉默。Lodash有现成的,但自己写也就10行闭包:防抖存timerId每次重置,节流存lastTime判断时间够了才执行。常见选项:`leading`(先执行再冷却)、`trailing`(末尾执行)、防抖的`maxWait`(别推迟太久)。
requestAnimationFrame比setTimeout更适合"节流到帧率"——跟渲染周期同步。
React里用useRef存timer跨渲染;别每次render都重新造debounce函数。
即答侠把两种实现背熟——白板上不会在闭包上卡壳。
组件卸载时timer还没触发就会。返回一个cancel方法、cleanup里调,避免stale update。
debounceTime和throttleTime操作符,语义和lodash一样。