事情的起源

在做项目的过程中，遇到这么一个需求：轻按按钮，事件触发一次，长按按钮，则事件需要不停的触发，微信没有提供这个方法，需要开发者自身去完成。

逻辑分析

当按钮按下, 此时获取得到按下的时间戳和一个按钮的状态, 写入this.data里面, 写入成功后, 开启一个递归函数, 首先是得到当前时间戳, 取出开始的时间戳, 二者做对比, 当大于设定值如200毫秒, 则为长按时间, 若小于, 则为单击事件, 当按钮松开, 改变按钮状态, 清除计时器.

代码实现

1. touchStart: function(e){
2. let timeStart = this.getTime();
3. let isTouch = true;
4. this.setData({timeStart, isTouch}, this.getNum)
5. }
6.  
7. touchEnd: function(){
8. this.setData({ isTouch: false }, this.getNum)
9. }
10.  
11. getNum: function(){
12. let { timeStart, isTouch } = this.data;
13. let timeNow = this.getTime();
14. let timeNum = 200;
15. let num = timeNow - timeStart;
16. let touchType = num < timeNum ? '单击': '长按';
17. if(isTouch){
18. // fnc 执行想要做的事
19. this.timer = setTimeout(this.getNum, 100)
20. }
21. else{
22. clearTimeout(this.timer)
23. }
24. }
25.  
26. getTime: function(){
27. let time = new Date()
28. return time.getTime()
29. } //获取当前时间的毫秒数

微信小知识

this.setData为一个异步函数, 如果有业务需要当数据写入成功后执行的话,可以使用这个方法来执行  this.setData({}, cb) cb 为回调函数

BUG修改

虽然按照以上情况能实现预期效果，但是还不够完美，经过实测，当快速点击并松开（在100ms内），想要执行的函数并不会触发，为了能兼容这种情况，我做出了一点改变，添加了一个bindtap函数，并在添加一个状态来判断是否触发执行函数

1. //bindtap 函数
2. tap: function(){
3. let { isSend } = this.data
4. if(!isSend){
5. // fnc 执行函数
6. }
7. }
8.  
9. //getNum 做适应性改变
10. getNum: function(){
11. let { timeStart, isTouch, isSend } = this.data;
12. let timeNow = this.getTime();
13. let timeNum = 200;
14. let num = timeNow - timeStart;
15. let touchType = num < timeNum ? '单击': '长按';
16. if(isTouch){
17. // fnc 执行想要做的事
18. this.setData({isSend: true }) // 添加的代码
19. this.timer = setTimeout(this.getNum, 100)
20. }
21. else{
22. clearTimeout(this.timer)
23. this.setData({ isSend:false }) //添加的代码
24. }
25. }
26. //

因为水平有限，只能通过这种方式来进行修改，如果有更好的方法，欢迎提出意见和建议