Raisons et solutions pour qu'uniapp saute deux fois en quelques clics rapides

Avec la popularité de l'Internet mobile, de plus en plus d'entreprises choisissent d'utiliser uniapp pour développer des applications mobiles. Cependant, uniapp peut rencontrer un problème courant lors du développement : cliquer pour sauter deux fois rapidement. Cet article vous présentera la cause et la solution de ce problème.

Cause du problème

Le problème de cliquer rapidement pour sauter deux fois est généralement dû au retard lors du clic sur le bouton, mais pendant cette période, l'utilisateur a rapidement cliqué à nouveau sur le bouton, ce qui a amené le programme à cliquer anormalement sur l'événement déclenché. deux fois.

Reportez-vous à l'exemple de code ci-dessous :

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

Lorsque l'utilisateur clique rapidement sur le bouton, si le bouton est à nouveau cliqué avant l'exécution du premier événement cliqué, l'événement sera à nouveau déclenché, entraînant une exception.

Solution

1. Utilisez le mécanisme de verrouillage

Le principe du mécanisme de verrouillage est de verrouiller à chaque fois qu'un événement est déclenché, d'attendre que l'événement en cours soit traité, puis de le déverrouiller. Pendant le traitement, l'événement ne peut pas être déclenché à nouveau. Par conséquent, cela peut empêcher efficacement l’exécution anormale d’événements provoqués par les clics rapides des utilisateurs.

Reportez-vous à l'implémentation du code ci-dessous :

<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>

Dans l'exemple ci-dessus, nous avons ajouté la variable verrouillée dans les données et une partie du code dans la méthode goPage pour la verrouiller avant l'exécution et la déverrouiller une fois le traitement terminé. Bien que cette méthode puisse résoudre le problème des clics rapides, le temps d'attente est relativement long, ce qui peut affecter l'expérience.

2. Utilisez l'algorithme Debounce (anti-shake)

Le principe de l'algorithme anti-shake est que lorsqu'un événement est déclenché, il est retardé pendant un certain temps avant d'être traité si l'événement est à nouveau déclenché pendant le processus. période, le timing sera redémarré. S'il n'est pas déclenché à nouveau, alors le traitement des événements est effectué.

Reportez-vous à l'implémentation du code ci-dessous :

<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>

Dans l'exemple ci-dessus, nous avons augmenté la variable debounceId dans les données et ajouté du code dans la méthode goPage pour la retarder pendant un certain temps avant le traitement si l'événement est à nouveau déclenché pendant le processus. période, puis réinitialiser l'heure. Bien que cette méthode n'ait pas d'impact majeur sur l'expérience utilisateur, un délai approprié doit être défini, et une conception inappropriée peut conduire à un traitement anormal des événements.

Résumé

Le problème de cliquer pour sauter deux fois rapidement est une anomalie courante dans le processus de développement d'uniapp, qui peut être résolue en utilisant des méthodes telles que le mécanisme de verrouillage ou l'algorithme anti-tremblement. Chaque méthode a ses avantages, ses inconvénients et ses scénarios applicables. Les développeurs doivent examiner de manière globale la situation réelle et choisir la solution la plus appropriée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!