当前位置:网站首页>Wechat applet: prevent multiple click jump (function throttling)
Wechat applet: prevent multiple click jump (function throttling)
2020-11-06 01:22:42 【:::::::】
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 .
版权声明
本文为[:::::::]所创,转载请带上原文链接,感谢
边栏推荐
- C++ 数字、string和char*的转换
- C++学习——centos7上部署C++开发环境
- C++学习——一步步学会写Makefile
- C++学习——临时对象的产生与优化
- C++学习——对象的引用的用法
- C++编程经验(6):使用C++风格的类型转换
- Won the CKA + CKS certificate with the highest gold content in kubernetes in 31 days!
- C + + number, string and char * conversion
- C + + Learning -- capacity() and resize() in C + +
- C + + Learning -- about code performance optimization
猜你喜欢
-
C + + programming experience (6): using C + + style type conversion
-
Latest party and government work report ppt - Park ppt
-
在线身份证号码提取生日工具
-
Online ID number extraction birthday tool
-
️野指针?悬空指针?️ 一文带你搞懂!
-
Field pointer? Dangling pointer? This article will help you understand!
-
HCNA Routing&Switching之GVRP
-
GVRP of hcna Routing & Switching
-
Seq2Seq实现闲聊机器人
-
【闲聊机器人】seq2seq模型的原理
随机推荐
- LeetCode 91. 解码方法
- Seq2seq implements chat robot
- [chat robot] principle of seq2seq model
- Leetcode 91. Decoding method
- HCNA Routing&Switching之GVRP
- GVRP of hcna Routing & Switching
- HDU7016 Random Walk 2
- [Code+#1]Yazid 的新生舞会
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- HDU7016 Random Walk 2
- [code + 1] Yazid's freshman ball
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- Qt Creator 自动补齐变慢的解决
- HALCON 20.11:如何处理标定助手品质问题
- HALCON 20.11:标定助手使用注意事项
- Solution of QT creator's automatic replenishment slowing down
- Halcon 20.11: how to deal with the quality problem of calibration assistant
- Halcon 20.11: precautions for use of calibration assistant
- “十大科学技术问题”揭晓!|青年科学家50²论坛
- "Top ten scientific and technological issues" announced| Young scientists 50 ² forum
- 求反转链表
- Reverse linked list
- js的数据类型
- JS data type
- 记一次文件读写遇到的bug
- Remember the bug encountered in reading and writing a file
- 单例模式
- Singleton mode
- 在这个 N 多编程语言争霸的世界,C++ 究竟还有没有未来?
- In this world of N programming languages, is there a future for C + +?
- es6模板字符
- js Promise
- js 数组方法 回顾
- ES6 template characters
- js Promise
- JS array method review
- 【Golang】️走进 Go 语言️ 第一课 Hello World
- [golang] go into go language lesson 1 Hello World