最近因为公司需要接触到微信小程序开发，对本人来说转变还是蛮大的毕竟我主要是开发iOS的，也是经历了微信小程序从入门到放弃（。。。）的过程。首先，什么都不知道的情况下肯定是先看官方文档。按照文档配置完之后就开始写了，这里主要说一下我在开发过程中遇到的一个问题。
其实问题就是在view标签中（button也可以）添加了一个bindtap点击方法，点击跳转页面，对没错就是这么简单！(我用的是sublime，没用微信开发者工具)
那么问题来了，当你连续点击两次的时候会跳转两次，连续多次点击直接就崩了，返回就是空白页，这在实际使用中是非常影响用户体验的。比如当网络条件差或卡顿的情况下，使用者会认为点击无效而进行多次点击，最后出现多次跳转页面的情况。查看文档无果，上网查阅资料大部分都是用前端Web知识解决的，作为一个小白很苦恼。
解决办法
函数节流(throttle)：函数在一段时间内多次触发只会执行第一次，在这段时间结束前，不管触发多少次也不会执行函数。废话不多说，直接上代码。
/utils/util.js(工具类):
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/Phone/Phone .js:
const util = require('../../utils/util.js')
goOrder: util.throttle(function (e) {
wx.navigateTo({
url: '/pages/Phone/Phone',
})
}, 1000),
这样就Ojbk啦，无论你怎么疯狂点击按钮也只会1s触发一次！！！
BUT，这样的话出现一个问题，如果你在方法中打印
console.log(this)
console.log(e)
console.log((new Date()).getSeconds())
会发现this.data得到的this是undefined, 或者想要获取微信组件button传递给点击函数的数据e也是undefined，所以throttle函数还需要做一点处理来使其能用在微信小程序的页面js里。
出现这种情况的原因是throttle返回的是一个新函数，已经不是最初的函数了。新函数包裹着原函数，所以组件button传递的参数是在新函数里。所以我们需要把这些参数传递给真正需要执行的函数fn
最终解决办法
/utils/util.js(工具类):
unction throttle(fn,gapTime) {
if (gapTime == null || gapTime == undefined) {
gapTime = 1500
}
let _lastTime = null
return function () {
let _nowTime = + new Date()
if (_nowTime - _lastTime > gapTime || !_lastTime) {
// 将this和参数传给原函数
fn.apply(this,arguments)
_lastTime = _nowTime
}
}
}
再次点击按钮this和e都有了，完工。
第一次写有不对的地方还请大家多多指正，可能对于前端来说是很简单的一个问题，但是对于我这种小白把搞出来了还是很有成就感的，前端大佬轻喷哈。。。
