支付寶小程序防止多次點擊跳轉(函數節流)

在app.js中寫入公用方法throttle()

App({
  globalData:{
    
  },
  onLaunch(options) {
    // 第一次打開
  },
  onShow(options) {
    // 從後臺被 scheme 重新打開
  },
  throttle(fn, gapTime) {//防止多次點擊跳轉
    if (gapTime == null || gapTime == undefined) {
        gapTime = 1500
    }
    let _lastTime = null
    // 返回新的函數
    return function () {
        let _nowTime = + new Date()
        if (_nowTime - _lastTime > gapTime || !_lastTime) {
        	//fn()如果直接調用,this指向會發生改變,所以用apply將this和參數傳給原函數
            fn.apply(this, arguments)   //將this和參數傳給原函數
            _lastTime = _nowTime
        }
    }
  }
});

在axml中寫入

<button onTap="payProduct">閃付</button>

在js中寫入

const app = getApp();

Page({
  data: {},
  onLoad(query) {
  },
  payProduct: app.throttle(function (e) {
      app.payment(e.currentTarget.dataset.id);
  }, 1000),
  onReady() {
    // 頁面加載完成
  },
  onShow() {
    // 頁面顯示
  },
  onHide() {
    // 頁面隱藏
  },
  onUnload() {
    // 頁面被關閉
  },
  onPullDownRefresh() {
    // 頁面被下拉
  },
  onReachBottom() {
    // 頁面被拉到底部
  },
});

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章