全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[抚顺seo公司便捷久澳]微信小程序函数节流多次点击跳转如何防止

  

在学本文的时候我们要知道函数节流是什么,函数节流与防抖的含义31 2020.10 [公司辞退SEO]小程序中image控件可以如何设置图片 本篇文章给大家带来的内容是关于小程序中image控件可以如何设置图片,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 小程序 image 控件设置占位图片◇▽◁:接下来本文就主要和大家分享微信小程序函数节流多次点击跳转如何防止-•○☆,希望对大家有用•=■。

  

场景

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

  

解决办法

  然后从 轻松理解JS函数节流和函数防抖 中找到了解决办法,[抚顺seo公司便捷久澳]就是函数节流(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都有了•■◆▪:

  相关推荐…□-◁:

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

  详解JavaScript函数节流

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

  以上就是微信小程序函数节流多次点击跳转如何防止的详细内容-•,更多请关注久澳传媒编程栏目其它相关文章△▽▽○!

[抚顺seo公司便捷久澳]微信小程序函数节流多次点击跳转如何防止

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。