Environnement d'exploitation Ruby 2.6.5 Rails 6.0.3.2
Auparavant, le même processus était généré plusieurs fois par addEventListener, ce qui provoquait une erreur et parfois je ne pouvais pas faire ce que je voulais, alors je l'ai publié.
Ruby:index.html.erb
<% @hugas.each do |huga| %>
<div class="huga" >
<%= huga.content %>
</div>
<% end %>
Le code ci-dessus montre que la colonne de contenu de huga est affichée à plusieurs reprises et que la classe du contenu affiché est huga.
huga.js
function hoge() {
const hugas = document.querySelectorAll(".huga");
hugas.forEach(function (huga) {
huga.addEventListener("click", () => {
//Traitement qui se produit en cliquant sur
});
});
};
setInterval(hoge, 1000);
Avec la fonction hoge () comme première ligne, nous expliquerons ce code à partir de la deuxième ligne. Dans la deuxième ligne, tous les éléments dont la classe est huga sont affectés à hugas. Dans la troisième ligne, les hugas sont divisés en un par un, et leurs noms sont huga. Si vous cliquez sur huga sur la 4ème ligne, le traitement sur la 5ème ligne se produira. La dernière ligne provoque l'opération ci-dessus toutes les secondes.
En d'autres termes, les deux codes ci-dessus montrent que lorsque vous cliquez sur le contenu, le processus écrit dans la 5ème ligne de huga.js se produit.
Cependant, si rien n'est fait, une erreur se produira. C'est parce que la dernière ligne de huga.js provoque le comportement des 2e et 3e lignes toutes les secondes. Ce qui se passe, c'est que, par exemple, si vous cliquez sur le contenu 10 secondes après la transition vers cette page, le traitement de la 5ème ligne se produira 10 fois en même temps.
Pour résoudre ce problème, vous avez besoin du titre de cet article, "Comment empêcher le traitement en double avec addEventListener".
huga.js
function hoge() {
const hugas = document.querySelectorAll(".huga");
hugas.forEach(function (huga) {
if (huga.getAttribute("baz") != null) {
return null;
}
huga.setAttribute("baz", "true");
huga.addEventListener("click", () => {
//Traitement qui se produit en cliquant sur
});
});
};
setInterval(hoge, 1000);
Le traitement en double peut être évité en ajoutant les 4e à 7e lignes du code ci-dessus. En effet, cet ajout signifie que peu importe le nombre de secondes qui se sont écoulées avant de cliquer sur le contenu, un huga ne sera traité qu'une seule fois.
Je vais expliquer la partie ajoutée en détail. Tout d'abord, lorsqu'une seconde s'écoule, le premier processus est exécuté et une branche conditionnelle se produit en raison de l'instruction if. Puisque huga n'a pas d'attribut appelé baz, il devient nul et l'expression conditionnelle est fausse, mais puisque le traitement dans le cas de faux n'est pas décrit, il passe au traitement suivant tel quel. La ligne 7 donne à huga l'attribut baz, ce qui est vrai. En d'autres termes, ** Le premier processus est le même qu'avant sa description. ** **
Regardons le cas lorsque 2 secondes se sont écoulées. Au bout de 2 secondes, le deuxième processus est exécuté et l'instruction if provoque à nouveau une branche conditionnelle. Contrairement à la première fois, huga a un attribut appelé baz, il n'est donc pas nul. Par conséquent, l'expression conditionnelle devient true, le traitement si true est effectué et return null est exécuté. Étant donné que renvoyer null signifie quitter le processus, le processus après cette description ne sera pas exécuté. En d'autres termes, même si vous cliquez sur le contenu après 2 secondes, ** le traitement ne sera effectué qu'une seule fois. ** ** Bien sûr, il en va de même après 3 secondes, vous pouvez donc éviter le traitement en double.
Recommended Posts