ポインタイベントを利用した連打防止方法の例-CSSチュートリアル-php.cn

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

小云云

リリース： 2017-12-19 09:57:30

オリジナル

1740 人が閲覧しました

ネットワーク上の理由により、ユーザーが時間内にフィードバックを取得できない場合、フロントエンドで繰り返しクリックされる問題が常に発生するため、この時点で 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)
}

ログイン後にコピー