uniapp が素早いクリックで 2 回ジャンプする理由と解決策

モバイル インターネットの人気に伴い、モバイル アプリケーションの開発に uniapp を使用する企業が増えています。ただし、uniapp は開発中によくある問題、つまりクリックして素早く 2 回ジャンプするという問題に遭遇する可能性があります。この記事では、この問題の原因と解決策を紹介します。

問題の原因

ジャンプを素早く 2 回クリックする問題は、通常、ボタンをクリックするときに遅延があることが原因ですが、この間にユーザーがもう一度ボタンをすばやくクリックすると、プログラムで例外が発生し、実際にはクリック イベントが 2 回トリガーされました。

次のコード例を参照してください:

<template>
  <button class="btn" @click="goPage">跳转到下一页</button>
</template>
<script>
  export default {
    methods: {
        goPage() {
            uni.navigateTo({
                url: '/pages/home/index'
            })
        }
    }
 }
</script>

ユーザーがボタンを素早くクリックしたとき、最初にクリックされたイベントが実行される前にボタンが再度クリックされると、イベントが再度トリガーされます。例外を引き起こします。

解決策

1. ロック メカニズムを使用する

ロック メカニズムの原理は、イベントがトリガーされるたびにロックし、現在のイベントが処理されるまで待機することです。ロックを解除します。処理中にイベントを再度トリガーすることはできません。したがって、ユーザーの素早いクリックによるイベントの異常実行を効果的に防止できます。

次のコード実装を参照してください:

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

            uni.navigateTo({
                url: '/pages/home/index'
            })

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

上の例では、データにロックされた変数を追加し、goPage メソッドにコードの一部を追加して、実行前にロックし、実行後にロックを解除しました。処理が完了しました。この方法ではクリックが早いという問題は解決できますが、待ち時間が比較的長く、エクスペリエンスに影響を与える可能性があります。

2. デバウンス (手ぶれ補正) アルゴリズムを使用する

手ぶれ補正アルゴリズムの原理は、イベントがトリガーされると、処理する前に一定期間遅延することです。期間中に再度イベントが発生するとタイマーが再起動され、再度イベントが発生しない場合はイベント処理が実行されます。

次のコード実装を参照してください:

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

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

上の例では、データに debounceId 変数を追加し、処理前に一定期間遅延させるコードを goPage メソッドに追加しました。 , 期間中に再度イベントが発生すると時間が再開されます。この方法はユーザーエクスペリエンスに大きな影響はありませんが、適切な遅延時間を設定する必要があり、設計を誤るとイベント処理が異常になる可能性があります。

概要

クリックして素早く 2 回ジャンプする問題は、uniapp 開発プロセスでよくある異常な状況ですが、ロック メカニズムや手ぶれ補正アルゴリズムを使用することで解決できます。それぞれの方法には利点、欠点、適用可能なシナリオがあり、開発者は実際の状況を総合的に考慮して、最適なソリューションを選択する必要があります。

以上がuniapp が素早いクリックで 2 回ジャンプする理由と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。