登录  /  注册

微信小程序函数节流多次点击跳转如何防止

小云云
发布: 2018-01-27 10:37:59
原创
3271人浏览过

在学本文的时候我们要知道函数节流是什么,函数节流与防抖的含义,接下来本文就主要和大家分享微信小程序函数节流多次点击跳转如何防止,希望对大家有用。

场景

在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况。

解决办法

然后从 轻松理解JS函数节流和函数防抖 中找到了解决办法,就是函数节流(throttle):函数在一段时间内多次触发只会执行第一次,在这段时间结束前,不管触发多少次也不会执行函数。

/utils/util.js:

<span style="font-size: 14px;">function throttle(fn, gapTime) {<br/>    if (gapTime == null || gapTime == undefined) {<br/>        gapTime = 1500<br/>    }<br/>    let _lastTime = null return function () {<br/>        let _nowTime = + new Date()<br/>        if (_nowTime - _lastTime > gapTime || !_lastTime) {<br/>            fn()<br/>            _lastTime = _nowTime<br/>        }<br/>    }<br/>}<br/>module.exports = {<br/>  throttle: throttle<br/>}<br/>/pages/throttle/throttle.wxml:<br/><button bindtap=&#39;tap&#39; data-key=&#39;abc&#39;>tap</button><br/>/pages/throttle/throttle.js<br/>const util = require(&#39;../../utils/util.js&#39;)<br/>Page({<br/>    data: {<br/>        text: &#39;tomfriwel&#39;<br/>    },<br/>    onLoad: function (options) {<br/>    },<br/>    tap: util.throttle(function (e) {<br/>        console.log(this)<br/>        console.log(e)<br/>        console.log((new Date()).getSeconds())<br/>    }, 1000)<br/>})</span>
登录后复制

这样,疯狂点击按钮也只会1s触发一次。

但是这样的话出现一个问题,就是当你想要获取this.data得到的this是undefined, 或者想要获取微信组件button传递给点击函数的数据e也是undefined,所以throttle函数还需要做一点处理来使其能用在微信小程序的页面js里。

5.jpg

出现这种情况的原因是throttle返回的是一个新函数,已经不是最初的函数了。新函数包裹着原函数,所以组件button传递的参数是在新函数里。所以我们需要把这些参数传递给真正需要执行的函数fn。

最后的throttle函数如下:

<span style="font-size: 14px;">function throttle(fn, gapTime) {<br/>    if (gapTime == null || gapTime == undefined) {<br/>        gapTime = 1500<br/>    }<br/>    let _lastTime = null // 返回新的函数 return function () {<br/>        let _nowTime = + new Date()<br/>        if (_nowTime - _lastTime > gapTime || !_lastTime) {<br/>            fn.apply(this, arguments)   //将this和参数传给原函数<br/>            _lastTime = _nowTime<br/>        }<br/>    }<br/>}<br/></span>
登录后复制

再次点击按钮this和e都有了:

6.jpg

相关推荐:

一个会话备忘录小程序的实现方法

详解JavaScript函数节流

JavaScript函数节流概念与用法实例详解

以上就是微信小程序函数节流多次点击跳转如何防止的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号