scroll 事件本身會觸發頁面的重新渲染，同時 scroll 事件的 handler 又會被高頻度的觸發, 因此事件的 handler 內部不應該有復雜操作，例如 DOM 操作就不應該放在事件處理中。

針對此類高頻度觸發事件問題（例如頁面 scroll ，屏幕 resize，監聽用戶輸入等），下面介紹兩種常用的解決方法，防抖和節流。

防抖（Debouncing）

防抖技術即是可以把多個順序地調用合并成一次，也就是在一定時間內，規定事件被觸發的次數。

通俗一點來說，看看下面這個簡化的例子：

// 簡單的防抖動函數 function debounce(func, wait, immediate) {// 定時器變量var timeout;return function() {// 每次觸發 scroll handler 時先清除定時器clearTimeout(timeout);// 指定 xx ms 后觸發真正想進行的操作 handlertimeout = setTimeout(func, wait);}; };// 實際想綁定在 scroll 事件上的 handler function realFunc(){console.log("Success"); }// 采用了防抖動 window.addEventListener('scroll',debounce(realFunc,500)); // 沒采用防抖動 window.addEventListener('scroll',realFunc);

上面簡單的防抖的例子可以拿到瀏覽器下試一下，大概功能

總結

以上是生活随笔為你收集整理的防抖函数和节流函数的实现，这个是在某保险公司笔试题遇到的。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。