Vue を使用してカウントダウン ボタンを実装する方法

今回は、Vue を使用してカウントダウン ボタンを実装する方法と、Vue を使用してカウントダウン ボタンを実装する際の注意点について説明します。以下は実際のケースです。

プロジェクト開発では、確認コードを送信し、クリック後に 60 秒のカウントダウンが表示されるボタンによく遭遇します。これは非常に一般的ですが、非常に単純ですが、これを作成する際に注意すべき点がいくつかあります。ボタンをクリックしてください。今日は書いています。質問がある場合は、出てきて修正してください。

完成したエフェクトは次のとおりです:

エフェクトをより速く表示するために、時間を5秒に設定しました。ボタンをクリックすると、カウントダウンが表示され、同時にボタンがクリックできなくなり、ボタンのスタイルが変更され、マウスホバーの外観も変更されます。

次に、コードを使用してそれを実装します:

<button class="button" @click="countDown">
 {{content}}
</button>
...
data () {
  return {
   content: '发送验证码',  // 按钮里显示的内容
   totalTime: 60      //记录具体倒计时时间
  }
},
methods: {
  countDown() {
    let clock = window.setInterval(() => {
      this.total--
      this.content = this.total + 's后重新发送'
    },1000)
  }
}

2 つのデータをデータに追加します。1 つは時間を記録するために使用され、もう 1 つはカウントダウン ボタンの特定のコンテンツを保持するために使用されます。 countDown 関数では、setInterval タイマーを使用して、totalTime を 1 秒ごとに 1 ずつ減らし、ボタンに表示される内容を変更します。 アロー関数は、外部の this を自動的にバインドするため、window.setInterval で使用されます。そのため、最初にこれを保存する必要はありません。

効果は以下の通りです:

しかし、このボタンにはまだいくつかの問題があります:

ボタンをクリックすると、1秒後の59秒から直接カウントダウンが始まり、真ん中の60が抜けています。
カウントダウン中もクリックできます
カウントダウンはまだクリアされていません

次に、これらの問題を解決するために、カウントダウン機能の改善を続ける必要があります。

countDown () {
 this.content = this.totalTime + 's后重新发送' //这里解决60秒不见了的问题
 let clock = window.setInterval(() => {
  this.totalTime--
  this.content = this.totalTime + 's后重新发送'
  if (this.totalTime < 0) {     //当倒计时小于0时清除定时器
    window.clearInterval(clock)
    this.content = &#39;重新发送验证码&#39;
    this.totalTime = 60
    }
 },1000)
},

上記のコードは、60 が欠落している問題を解決すると同時に、totalTime が 0 未満の場合、シンクロナイザーをクリアし、ボタンの内容をリセットし、次回使用するために totalTime を 60 にリセットします。

10 秒のカウントダウンの効果:

複数回クリックすると、巻き戻しの速度が速くなります。これは、クリックするたびに setInterval が開始され、これらの setInterval によって totalTime が減少するためです。解決策も非常に簡単です。単純にスロットルを調整するだけです。つまり、ボタンを最初にクリックした後に countDonw 関数のコードを実行不可能にし、再度実行できるようになるまでカウントダウンが終了するまで待機します。

data () {
  return {
   content: '发送验证码',
   totalTime: 10,
   canClick: true //添加canClick
  }
}
...
countDown () {
 if (!this.canClick) return  //改动的是这两行代码
 this.canClick = false
 this.content = this.totalTime + 's后重新发送'
 let clock = window.setInterval(() => {
  this.totalTime--
  this.content = this.totalTime + 's后重新发送'
  if (this.totalTime < 0) {
   window.clearInterval(clock)
   this.content = &#39;重新发送验证码&#39;
   this.totalTime = 10
   this.canClick = true  //这里重新开启
  }
 },1000)
}

データに canClick を追加します。デフォルトは true の場合、countDown のコードは実行できます。 false の場合は機能しません。 canClick を実行するたびに false に設定し、カウントダウンが終了したときにのみ true に変更します。このようにして、今の問題は解消されます。

これは実際にはほとんどこれだけですが、スタイルを調整することもできます:

<button class="button" :class="{disabled: !this.canClick}" @click="countDown">
...
.disabled{
 background-color: #ddd;
 border-color: #ddd;
 color:#57a3f3;
 cursor: not-allowed; // 鼠标变化
}

効果:

このカウントダウン ボタンは非常にシンプルですが、初めて書いたときはまだ当時、私は機能スロットリングの概念を知りませんでした。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue を使用して双方向データ バインディングを作成する方法

Vue を使用してプロキシ プロキシを実装する方法

以上がVue を使用してカウントダウン ボタンを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。