技術標籤：javascript

防抖與節流

• • 簡介
  • 防抖
  • 節流
  • 區別

簡介

在給DOM繫結事件時，有些事件我們是無法控制觸發頻率的。 如滑鼠移動事件onmousemove, 滾動滾動條事件onscroll，視窗大小改變事件onresize，瞬間的操作都會導致這些事件會被高頻觸發。如果事件的回撥函式較為複雜，就會導致響應跟不上觸發，出現頁面卡頓，假死現象。

<script>
    window.onmousemove=function(event){
      let X = event.clientX
      console.log(X);
    }
</script>
 

比如上面這樣,我們只想知道滑鼠最後的位置,但是在滑鼠移動的過程中,就會高頻的觸發該函式,這樣影響效能.
針對這類問題,有兩種方法來解決: 防抖(debounce)和節流(throttling)

防抖

防抖的實現思路就是: 針對連續高頻觸發的事件,第一次觸發的時候並不立即執行,而是呼叫一個一次性的定時器,在你規定的那個時間內(比如200ms),在200ms內再次被觸發,就清除定時器重新開始計時.如果200ms內沒有繼續觸發,就執行相應的函式.

<script>
   function test(){
     console.log('防抖成功');
   }
   function debounce(fn){
     let timer = null
     return function(){
       clearTimeout(timer)
       timer = setTimeout(fn,200)
     }
   }
   window.onmousemove = debounce(test)
 </script>
 

可以看到滑鼠移動時,不會觸發事件

節流

節流的實現思路: 當事件觸發時,立即執行函式,隨後在設定的週期內有事件觸發也不再執行,當週期過後有事件觸發再執行

<script>
   function test(){
     console.log('節流成功');
   }
   function throttling(fn){
     let flag = true
     return function(){
       if(!flag){
         return
       }
       flag = false
       setTimeout(()=>{
         fn()
         flag = true
       },1000)
     }
   }
   window.onmousemove = throttling(test)
 </script>
 

可以看到滑鼠滑動過程中並不是高頻率的執行函式,而是1000ms執行一次

區別

防抖是將多次執行變為最後一次執行，節流是將多次執行變成每隔一段時間執行