事情的起源

在做項目的過程中，遇到這么一個需求：輕按按鈕，事件觸發一次，長按按鈕，則事件需要不停的觸發，微信沒有提供這個方法，需要開發者自身去完成。

邏輯分析

當按鈕按下, 此時獲取得到按下的時間戳和一個按鈕的狀態, 寫入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. //

因為水平有限，只能通過這種方式來進行修改，如果有更好的方法，歡迎提出意見和建議