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

场景

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

 

解决办法

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

/utils/util.js:

1. function throttle(fn, gapTime) {

2. if (gapTime == null || gapTime == undefined) {

3. gapTime = 1500

4. }

5.  

6. let _lastTime = null

7. return function () {

8. let _nowTime = + new Date()

9. if (_nowTime - _lastTime > gapTime || !_lastTime) {

10. fn()

11. _lastTime = _nowTime

12. }

13. }

14. }

15.  

16. module.exports = {

17. throttle: throttle

18. }

19.  

/pages/throttle/throttle.wxml:

<button bindtap='tap' data-key='abc'>tap</button>

/pages/throttle/throttle.js

1. const util = require('../../utils/util.js')

2.  

3. Page({

4. data: {

5. text: 'tomfriwel'

6. },

7. onLoad: function (options) {

8.  

9. },

10. tap: util.throttle(function (e) {

11. console.log(this)

12. console.log(e)

13. console.log((new Date()).getSeconds())

14. }, 1000)

15. })

16.  

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

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

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

最后的throttle函数如下：

1. function throttle(fn, gapTime) {

2. if (gapTime == null || gapTime == undefined) {

3. gapTime = 1500

4. }

5.  

6. let _lastTime = null

7.  

8. // 返回新的函数

9. return function () {

10. let _nowTime = + new Date()

11. if (_nowTime - _lastTime > gapTime || !_lastTime) {

12. fn.apply(this, arguments) //将this和参数传给原函数

13. _lastTime = _nowTime

14. }

15. }

16. }

17.  

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

 

参考

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

源代码

• tomfriwel/MyWechatAppDemo 的throttle页面

本文作者：tomfriwel
原文地址：微信小程序：防止多次点击跳转（函数节流）-教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
声明：本文来源于网络，版权归作者所有，不代表本专栏观点，有什么问题请联系我，谢谢！