微信小程序跳转总是卡顿，怎么办？

Posted 2023-04-23

参考技术A 2018年，可以说是小程序真正爆发的一年，很多人开发者都加入到小程序的开发中来。小程序的出现，为企业与用户之间的沟通搭建了一条全新的渠道和行业生态，如果出现了一个选项按钮需要按几次才有反应、页面挑转卡顿、崩溃等等，这就会导致用户体验差，可能就会退出。针对这些问题，官方也推出了解决方案，但是监控手段还是无法将性能问题细分。听云作为国内领先的应用性能管理服务提供商，推出了小程序应用性能监控解决方案，可以解决小程序的性能监控问题、JS错误、页面延迟等问题。听云实现了从用户到网络再到服务的全覆盖，像你所说的这些问题，你可以去咨询看看，对你应该是有帮助的。

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

 

场景

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

 

解决办法

然后从 轻松理解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页面

 

 

 

转 : http://www.wxapp-union.com/portal.php?mod=view&aid=3618 

https://blog.csdn.net/rolan1993/article/details/79170513