ログイン認証コードカウントダウン最適化ページリアルタイムカウントダウンのリフレッシュ

1639 ワード
vue
ソース:https://www.cnblogs.com/HDou/p/5553424.html
現在、多くのページは検証コードを取得する必要がありますが、多くのページはこのような最適化をしていないと信じています.例えば、次のようなシーンです.
登録ページにアクセスすると、携帯電話番号を記入して認証コードを取得するボタンがあり、認証コードを取得するボタンをクリックすると、ボタンが灰色になり、60カウントダウン効果になります.60 S以内で再度認証コードを取得するボタンをクリックできません.ボタンが灰色なので、クリックできない状態です.
しかし、カウントダウンが行われている間にページをリフレッシュすると、一般的なページはすべてリフレッシュされ、カウントダウン効果も含まれず、ボタンが最初にクリック可能な状態に戻るのは論理的ではありません. ， ， ， ， 。
もう1つのシーン:もしカウントダウン時に任意に行われた場合、私はページを閉じて、それから60 S内でページを再開して、道理で60 s時間がまだ終わっていないので、私はページを再開して、カウントダウン効果は依然として存在するべきで、しかも実際の経過時間に対応して、つまり、 ， 50s ， ， 40s ， 10s。しかし,既存の多くのページではこのような論理は実現されていない.つまり、ページが更新され、カウントダウンがなくなり、ボタンが復元されたのは、当然不合理で論理的ではありません.このような問題に対する私の解決策は以下の通りです.
1.認証コード取得ボタンをクリックし、ボタンをクリック不可状態に変更してカウントダウンタイマを行い、カウントダウン秒数と現在時刻time 1をリアルタイムで記録する.
2.ページ更新時にカウントダウンボタンを傍受し、カウントダウン秒数と、ページが閉じた時の時間time 1と、現在の時間time 2を取得する.
3.現在の時間とページを閉じる時間の差がページを閉じるカウントダウン秒数より小さい場合は、カウントダウンは任意に行い、ボタンをカウントダウンスタイルに変更します.



            
const TIME_COUNT = 30
if (!this.timer) { // timer: null //             ,           setInterval
 this.count = TIME_COUNT
 this.show = false
 this.checkTel()
 this.timer = setInterval(() => {
   if (this.count > 0 && this.count <= TIME_COUNT) {
     this.count--
   } else {
     this.show = true
     clearInterval(this.timer)
     this.timer = null
   }
 }, 1000)
Webフロントエンドmvcライブラリ実装
VUE enterのリターンによるページリフレッシュの解決