微信小程序防连点时间_微信小程序BindTap快速连续点击目标页面跳转多次问题处理...

迷南。 2023-01-09 12:54 199阅读 0赞

问题描述：

1)wxml片段

连续点击,加载多次

连续点击,加载一次

2)js代码片段

loadMulti:function(e) \{

wx.navigateTo(\{

url: '/pages/loadMulti/index',

\})

\},

3)快速，连续点击“连续点击，加载多次”文本串时，我们会发现，目标页面loadMulti/index页面被加载了N次，需要点击N次返回，才可以返回到主页面。

问题原因剖析：

小程序基于MINA框架，该框架的核心框架的核心是一个响应的数据绑定系统，整个系统分为两块视图层(View)和逻辑层(App Service)，框架可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新；当点击按钮的时候，视图层会发送 bindtap的事件给逻辑层，逻辑层找到对应的事件处理函数loadMulti执行。

由于视图层发送bindtap事件给逻辑层并找到对应的处理函数需要时间T1，找到对应的处理函数loadMulti后，执行loadMulti函数：wx.navigateTo, hide 原页面，需要时间T2，如果在T1+T2时间内，快速连续点击N次，完全可以加载显示N次目标页面。

解决方案：

loadOnce:function(e) \{

if (!this.pageLoading) \{

this.pageLoading = !0;

wx.navigateTo(\{

url: '/pages/loadOnce/index',

\})

\}

\},

onShow: function() \{

this.pageLoading = !1;

\}

1)loadOnce事件处理函数中，设置pageLoading = true

2)页面的onShow事件中，设置pageLoading = false

其实我们可以封装成方法：

/\*\*

\*解决连续点击多次冲出触发事件

\*/

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

\}

\}

\}

tap

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)

\})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

时间： 2019-04-07

发表评论取消回复

表情：

评论列表（有 0 条评论，199人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序防连点时间_微信小程序BindTap快速连续点击目标页面跳转多次问题处理...

问题描述： 1)wxml片段连续点击,加载多次连续点击,加载一次 2)js代码片段 loadMulti:function(e) \{ wx.navigateTo

迷南。/ 2023年01月09日 12:54/ 0 赞/ 200 阅读

相关微信小程序页面跳转方法

方法一：WXML页面实现 1. `<navigator url = "/pages/xxx/xxx">跳转到新页面</navigator>` 2. `<navigat

我就是我/ 2022年12月16日 11:57/ 0 赞/ 225 阅读

相关微信小程序点击按钮跳转页面

> wxml <button bindtap="goToNotice" ></image></button> > js Page({ dat

我会带着你远行/ 2022年11月11日 13:22/ 0 赞/ 228 阅读

相关微信小程序---微信小程序点击navigator跳转无反应

通过navigator标签写的连接跳转无反应，原因就是要跳转的 url 最前面需要加斜杠。但是在app.json全局配置文件中配置页面路径时，前面是不允许加斜杠的，否则报

喜欢ヅ旅行/ 2022年11月06日 01:50/ 0 赞/ 466 阅读

相关微信小程序页面跳转无效

wx.navigateTo(OBJECT) 不会销毁当前页面，仅仅是将其hide，使用wx.navigateBack可以返回到原页面。 wx.redirectTo(OB

ゝ一世哀愁。/ 2022年05月22日 10:46/ 0 赞/ 295 阅读

相关微信小程序点击事件绑定，实现页面跳转

例如，我在图片上绑定了一个点击事件bindtap。 test.wxml <image bindtap='onmoney' mode='aspectFill' s

港控/mmm°/ 2022年03月31日 10:54/ 0 赞/ 655 阅读

相关微信小程序--防止页面多次点击，多次跳转，多次执行函数

解决办法：就是函数节流(throttle)：函数在一段时间内多次触发只会执行第一次，在这段时间结束前，不管触发多少次也不会执行函数。 util.js:

ゝ一世哀愁。/ 2022年03月10日 16:14/ 0 赞/ 446 阅读

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

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

╰半橙微兮°/ 2022年02月25日 20:14/ 0 赞/ 496 阅读

相关微信小程序的点击元素跳转页面事件

1.redirectTo //两个页面平行跳转，跳转之后关闭之前的页面，不能返回之前的页面。用法： wxml：

灰太狼/ 2021年09月17日 00:12/ 0 赞/ 419 阅读

相关微信小程序点击按钮跳转至tabbar页面

在具有tabbar的页面中，倘若你要实现tabbar中的页面跳转（并不是跳转到此tabbar页面外的其他页面），使用wx.redirectTo或wx.navigateTo是实现

Love The Way You Lie/ 2021年09月16日 14:42/ 0 赞/ 665 阅读