ポインタイベントを利用した連打防止方法の例

ネットワーク上の理由により、ユーザーが時間内にフィードバックを取得できない場合、フロントエンドで繰り返しクリックされる問題が常に発生するため、この時点で 2 つの繰り返しリクエストがバックエンドに送信されます。特に投稿送信時に重複データが2つ追加される場合、重大な問題が発生する可能性があります。この記事では、ポインタイベントを使用して繰り返しクリックを防止するための CSS に関する情報を中心に、サンプル コードを通じて詳細に紹介します。この記事は、すべての人の学習や理解に役立つことを願っています。

以前、この状況に遭遇したときは、リクエストが非同期であるため、リクエストが成功したかどうかにかかわらず、リクエストの開始後に変数を false に設定していました。または、失敗した場合は、変数を true に設定する必要があります。 簡単なコードは次のとおりです。

var canRequest = true
function postData () {
  if (!canRequest) return
  fetch(url)
  .then(res => {
    canRequest = true  
  })
  .catch(e => {
    canRequest = true
  })
  canRequest = false
}

これには何も問題はありませんが、通常、ボタンをクリックした後はグレーアウトする必要があることを考慮して、これを防ぐ方法を見つけました。 CSSレベルからクリックを繰り返す方法。

以下は SMS 認証コードを取得する例です:

<p id="count">获取验证码</p>

body {
    display: flex;
    height: 100vh;
}
#count {
    margin: auto;
    padding: 10px;
    width: 100px;
    border: 1px solid;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
}
.disable {
    pointer-events: none;
    color: #666;
}

const count = document.getElementById('count')
const tip = count.textContent
count.onclick = e => {
    console.log(111)
    count.classList.add('disable')
    count.textContent = 10
    var id = setInterval(() => {
        count.textContent--
        if (count.textContent <= 0) {
            count.classList.remove('disable')
            count.textContent = tip
            clearInterval(id)
        }
    }, 1000)
}

関連する推奨事項:

a: アクティブ プラス アニメーション クリック無効なソリューション

css3 クリックして波及効果を表示

JS リンクをクリック非表示コンテンツの表示に切り替える実装方法

以上がポインタイベントを利用した連打防止方法の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。