집 >웹 프론트엔드 >JS 튜토리얼 >Vue를 사용하여 SMS 확인 성능을 최적화하는 방법

Vue를 사용하여 SMS 확인 성능을 최적화하는 방법

php中世界最好的语言원래의: 2018-06-02 10:41:021280검색

이번에는 Vue를 사용하여 SMS 확인성능 최적화를 구현하는 방법과 Vue를 사용하여 SMS 확인 성능 최적화를 구현하는 데 필요한 주의 사항에 대해 설명하겠습니다. 실제 사례를 살펴보겠습니다.

보통 프로젝트에 등록할 때 SMS 인증 기능을 자주 사용하는데, 현재 많은 SMS 인증에서 다음과 같은 문제가 발생합니다. 예를 들어 SMS 인증 시간이 60초인 경우,

1. 카운트다운이 60초에 도달하지 않은 경우 브라우저를 새로 고치면 인증 코드 버튼을 다시 클릭할 수 있습니다

2. 버튼을 클릭한 후 카운트다운이 시작되면 예를 들어 50초에 브라우저를 닫았다가 5초 후에 이때 시간 카운트다운이 45초 정도 되어야 하는데 브라우저를 다시 열면 버튼이 다시 클릭될 수 있습니다

위의 두 가지 문제를 해결하려면 시간을 적어야 합니다. localstorage. 페이지가 열리면 localstorage로 가서 가져오세요. 며칠 전에 이 방법을 사용한 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>

핵심 사항은 다음과 같습니다

데이터에 사용해야 하는 여러

변수 정의

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

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

로컬 저장소 쓰기 및 읽기:

　　　　　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 마운팅 페이지가 완료된 후 (마운트된) 라이프 후크에서 JudgeCode() 메서드를 호출하여 이 기능을 구현하세요

이 기사의 사례를 읽으셨다고 생각합니다. 방법을 익히고 나면 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!