uniapp快速點擊跳兩次的原因與解決方法-uni-app-PHP中文網

首頁

web前端

uni-app

uniapp快速點擊跳兩次的原因與解決方法

PHPz

Apr 20, 2023 am 09:07 AM

隨著行動互聯網的普及，越來越多的企業選擇使用uniapp開發行動應用程式。然而，uniapp在開發中可能會遇到一個常見問題：快速點擊跳轉兩次。這篇文章將為你介紹這個問題的原因和解決方法。

問題的原因

快速點擊跳轉兩次的問題通常是因為在點擊按鈕時，有一段時間延遲，但在這段時間內用戶再次快速點擊了按鈕，導致程式出現異常，實際上點擊事件被觸發了兩次。

參考下面的程式碼範例：

<template>
  <button>跳转到下一页</button>
</template>
<script>
  export default {
    methods: {
        goPage() {
            uni.navigateTo({
                url: &#39;/pages/home/index&#39;
            })
        }
    }
 }
</script>

當使用者在快速點擊按鈕時，如果在第一次點擊的事件執行完之前再次點擊按鈕，就會再次觸發該事件，從而導致異常。

解決方法

1.使用鎖定機制

鎖定機制的原理是，在每次觸發事件時先進行鎖定，等待當前事件處理完畢後，再解鎖。在處理期間，無法再次觸發事件。因此，這樣可以有效防止使用者快速點擊導致事件的異常執行。

參考下面的程式碼實作：

<template>
  <button>跳转到下一页</button>
</template>
<script>
  export default {
    data() {
      return {
        locked: false
      }
    },
    methods: {
        goPage() {
            if(this.locked) {
              // 已经被锁定了，不能再次执行事件
              return
            }
            this.locked = true

            uni.navigateTo({
                url: &#39;/pages/home/index&#39;
            })

            // 在事件处理完后才解锁
            let _this = this
            setTimeout(() => {
              _this.locked = false
            },　500)
        }
    }
 }
</script>

在上述範例中，我們增加了data中的locked變數以及goPage方法中的部分程式碼，使其在執行前先進行鎖定，並處理完成後解鎖。此方法雖可解決快速點擊的問題，但其等待的延遲時間比較長，可能會影響體驗。

2.使用Debounce(防抖動)演算法

防抖動演算法的原理是，當事件觸發時，先延遲一段時間再進行處理，如果期間再次觸發該事件，則重新計時，如果未再次觸發，則執行事件處理。

參考下面的程式碼實作：

<template>
  <button>跳转到下一页</button>
</template>
<script>
  export default {
    data() {
      return {
        debounceId: null
      }
    },
    methods: {
        goPage() {
            if(this.debounceId) {
                // 如果正在等待响应，则取消掉
                clearTimeout(this.debounceId)
            }

            this.debounceId = setTimeout(() => {
                uni.navigateTo({
                    url: &#39;/pages/home/index&#39;
                })
            },　500)
        }
    }
 }
</script>

在上述範例中，我們增加了data中的debounceId變量，並在goPage方法中加入了程式碼，使其在處理前延遲一段時間，如果期間再次觸發事件，則重新計時。雖此方法對使用者體驗不會造成大的影響，但需要設定適當的延遲時間，設計不當可能會導致事件處理異常。