如何使用vue實現簡訊驗證效能優化

這次帶給大家如何使用vue實現簡訊驗證效能優化，使用vue實現簡訊驗證效能優化的注意事項有哪些，以下就是實戰案例，一起來看一下。

平常我們在專案中進行註冊等的時候,會經常用到短信驗證的功能,但是現在很多短信驗證都是存在下面幾個問題,例如短信驗證時間為60s的時候,

1. 當點擊完按鈕時,倒數計時還沒到60s過完時,刷新瀏覽器,驗證碼按鈕又可以重新點擊

#2.當點擊按鈕倒數計時開始,例如在50s的時候我關閉了瀏覽器,過了5s後,我在打開,此時時間倒數計時的時間應該是45s左右,但是當重新打開瀏覽器的時候,按鈕又可以重新點擊了

為了解決上面的兩個問題,就需要把時間都寫到localstorage裡面去,當打開頁面的時候,就去localstorage裡面去取,我這裡就貼上我的解決方法,因為前幾天有vue的專案用到該方法,所以我這裡就寫個vue的方法出來吧

元件裡面的html程式碼:

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

重點來啦

在data裡面定義幾個需要用到的變數:

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

取得簡訊驗證的方法:

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);
   }
  }

寫入與讀取localstorage:

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

防止頁面刷新是驗證碼失效:

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);
   }
  }

然後在html掛載頁面完成後的生命鉤子(mounted)中調用judgeCode()方法就能實現該功能了

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何使用vue中filter

#怎麼用vue判斷dom的class

以上是如何使用vue實現簡訊驗證效能優化的詳細內容。更多資訊請關注PHP中文網其他相關文章！