Beispiele für Methoden zur Verhinderung wiederholter Klicks mithilfe von Zeigerereignissen

Wir stoßen immer wieder auf das Problem wiederholter Klicks im Frontend. Wenn Benutzer nicht rechtzeitig Feedback erhalten, entscheiden sie sich wahrscheinlich für einen erneuten Klick. Daher werden zu diesem Zeitpunkt zwei wiederholte Anfragen gesendet Dies führt wahrscheinlich zu ernsthaften Problemen, insbesondere beim Posten, da möglicherweise zwei doppelte Daten hinzugefügt werden. Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen über die Verwendung von Zeigerereignissen ein, um wiederholte Klicks zu verhindern. Der Artikel stellt es ausführlich anhand von Beispielcode vor. Ich hoffe, dass es jedem helfen kann.

Wenn ich auf diese Situation gestoßen bin, habe ich normalerweise vor der js-Anfrage eine Variable „canRequest“ erstellt. Da die Anfrage asynchron ist, setze ich die Variable nach dem Ende der Anfrage auf „false“. Der einfache Code lautet wie folgt:

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

Daran ist nichts auszusetzen, aber wenn man bedenkt, dass die Schaltfläche nach dem Klicken im Allgemeinen ausgegraut sein muss, habe ich A gefunden Möglichkeit, wiederholte Klicks auf CSS-Ebene zu verhindern.

Das Folgende ist ein Beispiel für den Erhalt eines SMS-Bestätigungscodes:

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

Verwandte Empfehlungen:

a:active plus Animation Klicken Sie auf ungültige Lösung

CSS3-Klick, um den Welleneffekt anzuzeigen

JS-Implementierungsmethode zum Klicken auf den Link, um zur Anzeige versteckter Inhalte zu wechseln

Das obige ist der detaillierte Inhalt vonBeispiele für Methoden zur Verhinderung wiederholter Klicks mithilfe von Zeigerereignissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!