function debounce(f, wait) { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => { f(...args); }, wait); }; }
节流,顾名思义,控制水的流量。控制事件发生的频率,如控制为1s发生一次,甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。
例如:
1.scroll 事件,每隔一秒计算一次位置信息等function throttle(f, wait) { let timer; return (...args) => { if (timer) { return; } timer = setTimeout(() => { f(...args); timer = null; }, wait); }; }
防抖:防止抖动,单位时间内事件触发会被重置,避免事件被误伤触发多次。代码实现重在清零 clearTimeout。防抖可以比作等电梯,只要有一个人进来,就需要再等一会儿。业务场景有避免登录按钮多次点击的重复提交。