微信小程序：防止多次点击跳转（函数节流）

miqt 发布于2019-08-22 14:02 / 3469人阅读

摘要：这样，疯狂点击按钮也只会触发一次。出现这种情况的原因是返回的是一个新函数，已经不是最初的函数了。最后的函数如下返回新的函数将和参数传给原函数再次点击按钮和都有了参考轻松理解函数节流和函数防抖源代码的页面

场景

在使用小程序的时候会出现这样一种情况：当网络条件差或卡顿的情况下，使用者会认为点击无效而进行多次点击，最后出现多次跳转页面的情况，就像下图（快速点击了两次）：

解决办法

然后从轻松理解JS函数节流和函数防抖中找到了解决办法，就是函数节流(throttle)：函数在一段时间内多次触发只会执行第一次，在这段时间结束前，不管触发多少次也不会执行函数。

/utils/util.js:

function 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()
            _lastTime = _nowTime
        }
    }
}

module.exports = {
  throttle: throttle
}

/pages/throttle/throttle.wxml:

/pages/throttle/throttle.js

const util = require("../../utils/util.js")

Page({
    data: {
        text: "tomfriwel"
    },
    onLoad: function (options) {

    },
    tap: util.throttle(function (e) {
        console.log(this)
        console.log(e)
        console.log((new Date()).getSeconds())
    }, 1000)
})

这样，疯狂点击按钮也只会1s触发一次。

但是这样的话出现一个问题，就是当你想要获取this.data得到的this是undefined, 或者想要获取微信组件button传递给点击函数的数据e也是undefined，所以throttle函数还需要做一点处理来使其能用在微信小程序的页面js里。

出现这种情况的原因是throttle返回的是一个新函数，已经不是最初的函数了。新函数包裹着原函数，所以组件button传递的参数是在新函数里。所以我们需要把这些参数传递给真正需要执行的函数fn。

最后的throttle函数如下：

function 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.apply(this, arguments)   //将this和参数传给原函数
            _lastTime = _nowTime
        }
    }
}

再次点击按钮this和e都有了：

参考

轻松理解JS函数节流和函数防抖

源代码

tomfriwel/MyWechatAppDemo 的throttle页面

云服务器 GPU云服务器防止多次点击微信小程序微信小程序支付微信小程序部署

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92799.html

微信小程序开发中遇到的问题及解决办法（三）

摘要：资料整理关于配置微信小程序页面附关于微信搜索小程序内页面的功能，只能在线上环境有用，而且没有提供测试的渠道。二微信小程序激励视频广告接入微信视频广告指引截图具体使用注意激励视频广告组件是一个原生组件，层级比普通组件高。大纲：根据近期我在小程序开发中接到的需求，总结一下下面四个开发需求所遇到的问题： 1、关于微信现已开放小程序内搜索（sitemap 配置）；2、微信小程序的激励视频广告...

Lowky 2019-08-30 11:07 评论0 收藏0
微信小程序开发中遇到的问题及解决办法（三）

摘要：资料整理关于配置微信小程序页面附关于微信搜索小程序内页面的功能，只能在线上环境有用，而且没有提供测试的渠道。二微信小程序激励视频广告接入微信视频广告指引截图具体使用注意激励视频广告组件是一个原生组件，层级比普通组件高。大纲：根据近期我在小程序开发中接到的需求，总结一下下面四个开发需求所遇到的问题： 1、关于微信现已开放小程序内搜索（sitemap 配置）；2、微信小程序的激励视频广告...

elina 2019-08-02 15:15 评论0 收藏0
微信小程序开发中遇到的问题及解决办法（三）

摘要：资料整理关于配置微信小程序页面附关于微信搜索小程序内页面的功能，只能在线上环境有用，而且没有提供测试的渠道。二微信小程序激励视频广告接入微信视频广告指引截图具体使用注意激励视频广告组件是一个原生组件，层级比普通组件高。大纲：根据近期我在小程序开发中接到的需求，总结一下下面四个开发需求所遇到的问题： 1、关于微信现已开放小程序内搜索（sitemap 配置）；2、微信小程序的激励视频广告...

voyagelab 2019-08-23 18:02 评论0 收藏0
优雅解决微信小程序授权登录需要button触发

摘要：优雅解决微信小程序授权登录需要触发聊一聊最近的一个项目，这个项目是一个收书售书的小程序，有商城专栏信息发布论坛等功能。微信不会把的有效期告知开发者。优雅解决微信小程序授权登录需要button触发聊一聊最近的一个项目，这个项目是一个收书、售书的小程序，有商城、专栏、信息发布论坛等功能。虽然不是面向所有用户，但要求无论用户是否授权都皆可使用，但同时也要求部分功能对不授权的用户限制开放。...

plus2047 2019-08-23 15:40 评论0 收藏0
20181012微信小程序填坑手册～

摘要：全屏蒙版弹窗遮不住的层级还是很高的，当出现全屏蒙版弹窗时，是无法盖住的，可以调用微信的，不过需要注意兼容低版本在类设置的颜色并没有变化。从6月份开始到现在，写小程序将近4个月了开发时给自己埋了不少坑～给大家分享下我的填坑经验～～开发部分 1.小程序的组件修改不能触发页面刷新？需要在父级文件上保存下才会触发（使用wepy开发） 2.接口请求出现的问题？记得勾选调试开发工具上不校验...

刘玉平 2019-08-23 12:19 评论0 收藏0