```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); } } ``` > 本文作者：不愛喝橙子汁