小程序中使用防抖函數能夠更加簡單

通常小程序綁定事件以下
<view class="create-page" bindtouchmove="debounceImageMoveIng" bindtouchend="imageMoveEnd">

而正常綁定事件使用防抖函數時須要初始化防抖函數
jQuery(window).on('resize', \_.debounce(calculateLayout,150));

咱們知道防抖函數是一個函數定義一個timer屬性，而後返回一個閉包函數，當你調整瀏覽器大小或者滾動頁面時，執行當就是防抖函數返回的這個閉包函數，而防止頻繁執行就是經過timer+setTimeout控制。

function debounce(fn,wait){
    var timer = null;
    return function(){
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn,wait);
    }
}
    
function handle(){
    console.log(Math.random());
}
    
window.addEventListener("resize",debounce(handle,1000));

在小程序中若是用 this.timer 代替閉包的timer 那麼就不須要額外的閉包函數，也不須要初始化防抖函數。

debounceImageMoveIng: function (e) {
    if(this.timer) {
      clearTimeout(this.timer)
    }
    this.timer = setTimeout(()=>{
      this.imageMoveIng(e)
    },10)
  }

錯誤使用防抖函數的例子

debounceImageMoveIng: function (e) {
    // 錯誤：每次觸發事件都只是初始化
    debounce(()=>{
      this.imageMoveIng(e)
    },10)
    // 錯誤：每次觸發事件初始化後 都執行，至關於了每次都延遲執行
    debounce(this.imageMoveIng,10)(e)
  }