Exemples de méthodes pour empêcher les clics répétés à l'aide d'événements de pointeur

Nous rencontrons toujours le problème des clics répétés sur le front-end. Pour des raisons de réseau, si les utilisateurs ne peuvent pas obtenir de commentaires à temps, ils choisiront probablement de cliquer à nouveau, donc à ce moment, deux demandes répétées seront envoyées à. le back-end. Cela est susceptible de causer de sérieux problèmes, en particulier lors de l'envoi d'un message, deux données en double peuvent être ajoutées. Cet article vous présente principalement les informations pertinentes sur CSS utilisant des événements de pointeur pour éviter les clics répétés. L'article le présente de manière très détaillée à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour l'apprentissage ou la compréhension de chacun.

Lorsque j'ai rencontré cette situation auparavant, je créais généralement une variable canRequest avant la requête js. Puisque la requête est asynchrone, je définirai la variable sur false après le démarrage de la requête. Lorsque la requête se termine, la variable doit être utilisée. être défini sur true quel que soit le succès ou l'échec. Le code simple est le suivant :

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

Il n'y a rien de mal à cela, mais étant donné que le bouton doit généralement être grisé après avoir cliqué, j'ai trouvé A. moyen d'éviter les clics répétés du niveau CSS.

Ce qui suit est un exemple d'obtention d'un code de vérification 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)
}

Recommandations associées :

a:active plus animation le clic n'est pas valide Solution

css3 cliquez pour afficher l'effet d'entraînement

JS cliquez sur le lien pour basculer vers l'affichage de la méthode de mise en œuvre du contenu caché

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!