事件

在使用小程序时，会出现这样的情况：当网络条件差或卡顿时，用户会认为点击无效而多次点击，最后会多次跳转到页面，如下图(快速点击两次):

解决办法

然后，我们从对JS函数节流和函数防抖的简单理解中找到了一个解决方案，那就是函数节流：函数在一段时间内被触发几次后才会第一次执行，在这段时间结束前无论被触发多少次都不会执行。

/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 } } }模块. exports={ throttle : throttle }/page/throttle/throttle . wxml : button bind tap=' tap ' data-key=' ABC ' tap/button/pages/throttle . jsconst util=require('././utils/util . js’)Page({ data : { text : ' tomfriwel ' }，onLoad:函数(选项){ }，Tap:util。油门(功能(e){控制台。记录(此)控制台。日志控制台。日志((新日期())。getseconds ())}，1000)})这样，疯狂点击一个按钮，每1秒只会触发一次。

但是有一个问题，就是当你想获取this.data的时候，这个是未定义的，或者当你想获取微信组件按钮传递给click函数的数据e的时候，也是未定义的，所以throttle函数需要做一些处理，使其在微信小程序的页面js中可用。

原因是throttle返回了一个新的函数，不再是原来的函数。新函数包装了原始函数，因此组件按钮传递的参数在新函数中。因此，我们需要将这些参数传递给真正需要执行的函数fn。

最终油门功能如下：

函数throttle(fn，Gaptime){ if(Gaptime==null | | Gaptime==undefined){ Gaptime=1500 } let _ last time=null//返回一个新函数return function(){ let _ now time=new date()(if(_ now time-_ last time Gaptime | |！_ lasttime) {fn。apply (this，arguments)//将this和参数传递给原始函数_lastTime=_nowTime} }}再次单击this和e按钮。

参考

轻松了解JS功能节流和防抖功能

摘要

以上是边肖推出的防止多次点击跳转(功能节流)的微信小程序，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！