当前位置:网站首页>Wechat applet: prevent multiple click jump (function throttling)
Wechat applet: prevent multiple click jump (function throttling)
2020-11-06 01:22:00 【:::::::】
scene
When using applets, there is a situation like this : When network conditions are poor or stuck , Users will think that the click is invalid and make multiple clicks , Many times the page jumps , As the figure below ( Two quick clicks ):
terms of settlement
And then from Easy to understand JS Function throttling and function buffeting We found a solution , Namely Function throttling (throttle): A function that fires multiple times over a period of time will only execute the first time , By the end of this period , No matter how many times it is triggered, it will not execute the function .
/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) })
such , Crazy click on the button will only 1s Trigger once .
But then there's a problem , It's when you want to get this.data
Got this
yes undefined
, Or want to get wechat components button
Data passed to the click function e
It's also undefined
, therefore throttle
Function also needs to do some processing to make it can be used in the wechat applet page js
in .
The reason for this is throttle
It returns a new function , It's not the original function anymore . The new function encapsulates the original function , So the component button
The parameters passed are in the new function . So we need to pass these parameters to the functions that really need to be executed fn
.
final throttle
Function as follows :
function throttle(fn, gapTime) { if (gapTime == null || gapTime == undefined) { gapTime = 1500 } let _lastTime = null // Return the new function return function () { let _nowTime = + new Date() if (_nowTime - _lastTime > gapTime || !_lastTime) { fn.apply(this, arguments) // take this And parameters to the original function _lastTime = _nowTime } } }
Click the button again this
and e
Have it all. :
Reference resources
Source code
- tomfriwel/MyWechatAppDemo Of
throttle
page
Participation of this paper Tencent cloud media sharing plan , You are welcome to join us , share .
版权声明
本文为[:::::::]所创,转载请带上原文链接,感谢
边栏推荐
- JVM memory area and garbage collection
- 中小微企业选择共享办公室怎么样?
- Python3 e-learning case 4: writing web proxy
- Python crawler actual combat details: crawling home of pictures
- Mongodb (from 0 to 1), 11 days mongodb primary to intermediate advanced secret
- Troubleshooting and summary of JVM Metaspace memory overflow
- 6.1.1 handlermapping mapping processor (1) (in-depth analysis of SSM and project practice)
- Save the file directly to Google drive and download it back ten times faster
- 人工智能学什么课程?它将替代人类工作?
- git rebase的時候捅婁子了,怎麼辦?線上等……
猜你喜欢
阿里云Q2营收破纪录背后,云的打开方式正在重塑
中国提出的AI方法影响越来越大,天大等从大量文献中挖掘AI发展规律
全球疫情加速互联网企业转型,区块链会是解药吗?
Computer TCP / IP interview 10 even asked, how many can you withstand?
你的财务报告该换个高级的套路了——财务分析驾驶舱
教你轻松搞懂vue-codemirror的基本用法:主要实现代码编辑、验证提示、代码格式化
Brief introduction of TF flags
Summary of common string algorithms
Network security engineer Demo: the original * * is to get your computer administrator rights! 【***】
使用 Iceberg on Kubernetes 打造新一代云原生数据湖
随机推荐
Python crawler actual combat details: crawling home of pictures
Network security engineer Demo: the original * * is to get your computer administrator rights! 【***】
Filecoin最新动态 完成重大升级 已实现四大项目进展!
ipfs正舵者Filecoin落地正当时 FIL币价格破千来了
Examples of unconventional aggregation
The difference between Es5 class and ES6 class
Programmer introspection checklist
全球疫情加速互联网企业转型,区块链会是解药吗?
关于Kubernetes 与 OAM 构建统一、标准化的应用管理平台知识!(附网盘链接)
Do not understand UML class diagram? Take a look at this edition of rural love class diagram, a learn!
How to select the evaluation index of classification model
Subordination judgment in structured data
Can't be asked again! Reentrantlock source code, drawing a look together!
加速「全民直播」洪流,如何攻克延时、卡顿、高并发难题?
6.4 viewresolver view parser (in-depth analysis of SSM and project practice)
Arrangement of basic knowledge points
[event center azure event hub] interpretation of error information found in event hub logs
EOS创始人BM: UE,UBI,URI有什么区别?
DevOps是什么
Nodejs crawler captures ancient books and records, a total of 16000 pages, experience summary and project sharing