Comment utiliser vue pour optimiser les performances de vérification SMS

Cette fois, je vais vous montrer comment utiliser vue pour implémenter la vérification SMSOptimisation des performances, et quelles sont les précautions pour utiliser Vue pour implémenter l'optimisation des performances de la vérification SMS. Voici des exemples pratiques. cas, jetons un coup d'œil ensemble Jetez un œil.

Habituellement, lorsque nous nous inscrivons dans des projets, nous utilisons souvent la fonction de vérification par SMS, mais maintenant de nombreuses vérifications par SMS présentent les problèmes suivants, par exemple lorsque le temps de vérification par SMS est de 60 s,

1. Lorsque vous cliquez sur le bouton et que le compte à rebours n'a pas atteint 60 secondes, actualisez le navigateur et le bouton Code de vérification peut être cliqué à nouveau

2. Lorsque le bouton est cliqué, le compte à rebours commence. Par exemple, je ferme le navigateur à 50 secondes. Après 5 secondes, je l'ouvre. A ce moment, le temps du compte à rebours devrait être d'environ 45 secondes, mais lorsque je rouvre le navigateur, on peut cliquer à nouveau sur le bouton

Afin de résoudre les deux problèmes ci-dessus, vous devez écrire l'heure dans localstorage. Lorsque la page est ouverte, accédez à localstorage pour l'obtenir. Je vais coller ma solution ici, car les quelques précédentes ont un projet vue qui l'utilise. méthode tous les jours, je vais donc écrire une méthode vue ici

Le code html dans le composant :

<p class="mtui-cellft" @click="getCode">
   <button class="mtui-vcode-btn mtui-text-center" v-if="flag">获取短信</button>
   <button class="mtui-vcode-btn mtui-text-center" v-if="!flag">剩余{{second}}s</button>
</p>

Voici le point clé

Définir plusieurs variables qui doivent être utilisées dans les données :

 second: 60,
 flag: true,
 timer: null // 该变量是用来记录定时器的,防止点击的时候触发多个setInterval

Comment obtenir la vérification par SMS :

getCode() {
   let that = this;
   if (that.flag) {
    that.flag = false;
    let interval = window.setInterval(function() {
     that.setStorage(that.second);
     if (that.second-- <= 0) {
      that.second = 60;
      that.flag = true;
      window.clearInterval(interval);
     }
    }, 1000);
   }
  }

Écrire et lire le stockage local :

　　　　　setStorage(parm) {
   localStorage.setItem("dalay", parm);
   localStorage.setItem("_time", new Date().getTime());
  },
  getStorage() {
   let localDelay = {};
   localDelay.delay = localStorage.getItem("dalay");
   localDelay.sec = localStorage.getItem("_time");
   return localDelay;
  }

Empêchez l'actualisation de la page d'invalider le code de vérification :

judgeCode() {
   let that = this;
   let localDelay = that.getStorage();
   let secTime = parseInt(
    (new Date().getTime() - localDelay.sec) / 1000
   );
   console.log(localDelay);
   if (secTime > localDelay.delay) {
    that.flag = true;
    console.log("已过期");
   } else {
    that.flag = false;
    let _delay = localDelay.delay - secTime;
    that.second = _delay;
    that.timer = setInterval(function() {
     if (_delay > 1) {
      _delay--;
      that.setStorage(_delay);
      that.second = _delay;
      that.flag = false;
     } else {
　　　　　　　　　　　　　
　　　　　　　　　　　　　　// 此处赋值时为了让浏览器打开的时候,直接就显示剩余的时间
      that.flag = true;
      window.clearInterval(that.timer);
     }
    }, 1000);
   }
  }

Appelez ensuite la méthode JudgeCode() dans le life hook (monté) une fois la page de montage HTML terminée. Cette fonction est disponible

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Comment utiliser le filtre dans vue

Comment utiliser vue pour déterminer la classe de dom

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!