金狮贵宾会

登录
免费开通
产品中心
更多服务

微信小程序多次跳转的情形怎么阻止

—— 2018 ——
02/09
00:00

泉源：

作者：未知

阅读：0

栏目：小程序开发

2018/2/9 0:00:00 泉源：不详 作者：未知
场景在使用小程序的时间会泛起这样一种情形：当网络条件差或卡顿的情形下，，，使用者会以为点击无效而举行多次点击，，，最后泛起多次跳转页面的情形，，，这种情形要怎么阻止。 。。
解决步伐
 
然后从 轻松明确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:
 
<button bindtap='tap' data-key='abc'>tap</button>
/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页面

小程序工具提供多类型商城/门店小程序制作，，，可视化编辑 1秒天生5步上线。 。。通过拖拽、拼接模浚块结构小程序商城页面，，，所看即所得，，，只需要美工就能做出细腻商城。 。。

更多微信小程序相关资讯，，，请前往：/miniprogramschool/



【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿，，，由于未联系到知识产权人或未发明有关知识产权的挂号，，，若有知识产权人并不肯意我们使用，，，若是有侵权请连忙联系。 。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真，，，仅系客观性形貌，，，如您需要相识该类商品/服务详细的资讯，，，请您直接与该类商品/服务的提供者联系。 。。


KESION 金狮贵宾会软件

KESION 金狮贵宾会软件是海内领先的在线教育软件及私域社交电商软件服务提供商，，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。 。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。 。。

KESION 一直通过手艺立异，，，提供产品和服务，，，助力企业向数字化转型，，，通过科技驱动商业刷新，，，让商业变得更智慧！



▼点击进入金狮贵宾会官网相识更多



热门标签
微信小程序 SaaS
上/下篇

  • 剖析麦当劳小程序定制式的用户服务是引流的要害

    现在，，，“i麦当劳”小程序天天有约20万的会见人数，，，在此基础上也有大宗的新增用户，，，用户平均停留时间30秒。 。。麦当劳上线仅仅10个月的麦当劳小程序，，，是怎样获得20万日活用户的呢?...

    微信小程序SaaS 2018/2/11 0:00:00

  • 摇一摇小程序系统开发

    我们知道微信摇一摇这个功效，，，可是若是开发一个摇一摇小程序，，，要怎么做呢？？ ...

    微信小程序 2018/2/9 0:00:00
换一换相关推荐
精选内容
热门精选
金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫
【网站地图】
微信小程序多次跳转的情形怎么阻止 - KESION 金狮贵宾