>[danger]防抖函數 --- > 計n秒, 時間到了才執行 --- 事件觸發, n秒后開始執行代碼, 如果n秒內, 事件再次出發, 則n秒重新計時 案例: 鼠標移入切換不同書籍展示 問題: 事件多次觸發, 導致異步Ajax多次觸發, 多次鋪設頁面  解決: 事件觸發, 1秒后再執行, 如果1秒內, 再次觸發, 則重新計時1秒.  >[info] 代碼 --- DOM標簽里, 綁定方式最終版: ~~~ `<button onmouseover="debounce(btn, 1, ${obj.id})">${obj.catalog}</button>` function debounce(fn, time, ...arg) { if (fn.t !== undefined) clearTimeout(fn.t); // 如果定時器存在, 先清除 fn.t = setTimeout(() => { // 重新開始定時 fn(...arg); // 把多個參數, 拆開傳下去, fn相當于btn方法名 }, time * 1000); } ~~~ JS里綁定, 最終版 ~~~ $("#buttonDiv>button").on("mouseover", debounce(btn, 1, 242)); function debounce(fn, time, ...arg) { return function(){ if (fn.t !== undefined) clearTimeout(fn.t); // 如果定時器存在, 先清除 fn.t = setTimeout(() => { // 重新開始定時 fn(...arg); // 把多個參數, 拆開傳下去 }, time * 1000); } } ~~~ >[info] 立即執行版 --- ~~~ function debounce(fn, time, ...arg) { if (fn.t === undefined) fn(...arg); // 立即執行版 if (fn.t !== undefined) clearTimeout(fn.t); fn.t = setTimeout(() => { fn(...arg); }, time * 1000); } ~~~ >[warning] 使用場景 --- * 移入/移出 等 事件, 防止多次觸發 * onresize / scroll 事件, 防止多次觸發 * 文本輸入(動態進行Ajax請求), 防止多次觸發