```js /** * 节流 * 在给定时间内只有第一次的操作会返回结果 * 结合了防抖的思路：在delay时间内生成定时器，一旦到了delay的时间就返回结果 * 当用户只点击了一次的时候，在delay时间后得到结果 * 当用户点击了多次的时候，在delay时间后得到第一次的结果，其余的被节流阀忽视掉 * @author 不爱喝橙子汁 * @version 1.0.0 * @param {Function} fn 要包装的回调函数 * @param {number} delay 延迟时间，单位ms，默认500 * @return {Function} 被节流函数劫持的新的函数 */ function throttle(fn, delay = 500) { let last = 0; let timer = null; return function () { let args = arguments; let now = +new Date(); let context = this; if (now - last < delay) { clearTimeout(timer); timer = setTimeout(() => { last = now; fn.apply(context, args); }, delay); } else { last = now; fn.apply(context, args); } } } ``` ```js /** * 防抖 * 在delay时间后得到结果 * 如果没等到delay的时间一直触发则永远也得不到结果 * @author 不爱喝橙子汁 * @version 1.0.0 * @param {Function} fn 要包装的回调函数 * @param {number} delay 延迟时间，单位ms，默认500 * @return {Function} 被防抖函数劫持的新的函数 */ function debounce(fn, delay = 500) { let timer = null; return function () { let args = arguments; if(timer) { clearTimeout(timer); } timer = setTimeout(() => { fn.apply(this, args); }, delay); } } ``` > 本文作者：不爱喝橙子汁