Betriebsumgebung Ruby 2.6.5 Rails 6.0.3.2
Zuvor wurde derselbe Prozess viele Male von addEventListener generiert, was einen Fehler verursachte und manchmal konnte ich nicht tun, was ich wollte, also habe ich ihn gepostet.
Ruby:index.html.erb
<% @hugas.each do |huga| %>
<div class="huga" >
<%= huga.content %>
</div>
<% end %>
Der obige Code zeigt, dass die Inhaltsspalte von huga wiederholt angezeigt wird und die Klasse des angezeigten Inhalts huga ist.
huga.js
function hoge() {
const hugas = document.querySelectorAll(".huga");
hugas.forEach(function (huga) {
huga.addEventListener("click", () => {
//Verarbeitung, die durch Klicken erfolgt
});
});
};
setInterval(hoge, 1000);
Mit der Funktion hoge () als erster Zeile erklären wir diesen Code aus der zweiten Zeile. In der zweiten Zeile werden alle Elemente, deren Klasse Huga ist, Hugas zugewiesen. In der dritten Zeile wird Hugas nacheinander unterteilt, und ihre Namen sind huga. Wenn Sie in der 4. Zeile auf huga klicken, erfolgt die Verarbeitung in der 5. Zeile. Die letzte Zeile bewirkt jede Sekunde die obige Operation.
Mit anderen Worten, die beiden oben genannten Codes zeigen, dass beim Klicken auf den Inhalt der in der 5. Zeile von huga.js geschriebene Prozess ausgeführt wird.
Wenn jedoch nichts unternommen wird, tritt ein Fehler auf. Dies liegt daran, dass die letzte Zeile von huga.js das Verhalten der 2. und 3. Zeile jede Sekunde verursacht. Wenn Sie beispielsweise 10 Sekunden nach dem Übergang zu dieser Seite auf Inhalt klicken, wird die Verarbeitung der 5. Zeile zehnmal gleichzeitig ausgeführt.
Um dieses Problem zu lösen, ist der Titel dieses Artikels "So verhindern Sie die doppelte Verarbeitung durch addEventListener" erforderlich.
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", () => {
//Verarbeitung, die durch Klicken erfolgt
});
});
};
setInterval(hoge, 1000);
Eine doppelte Verarbeitung kann verhindert werden, indem die 4. bis 7. Zeile des obigen Codes hinzugefügt werden. Dies liegt daran, dass dieser Zusatz bedeutet, dass unabhängig davon, wie viele Sekunden vor dem Klicken auf den Inhalt vergangen sind, eine Huga nur einmal verarbeitet wird.
Ich werde den hinzugefügten Teil im Detail erklären. Zuerst wird nach 1 Sekunde der erste Prozess ausgeführt, und die if-Anweisung verursacht eine bedingte Verzweigung. Da huga kein Attribut namens baz hat, wird es null und der bedingte Ausdruck ist falsch. Da die Verarbeitung im Fall von false jedoch nicht beschrieben wird, geht es so wie es ist zur nächsten Verarbeitung über. Zeile 7 gibt huga das Attribut baz, was wahr ist. Mit anderen Worten, ** Der erste Prozess ist der gleiche wie zuvor beschrieben. ** **.
Schauen wir uns den Fall an, wenn 2 Sekunden vergangen sind. Nach 2 Sekunden wird der zweite Prozess ausgeführt, und die if-Anweisung verursacht erneut eine bedingte Verzweigung. Im Gegensatz zum ersten Mal hat huga ein Attribut namens baz, also ist es nicht null. Daher wird der bedingte Ausdruck wahr, verarbeitet, wenn wahr ausgeführt wird, und gibt return null aus. Da return null bedeutet, den Prozess zu beenden, wird der Prozess nach dieser Beschreibung nicht ausgeführt. Mit anderen Worten, selbst wenn Sie nach Ablauf von 2 Sekunden auf Inhalt klicken, wird die ** Verarbeitung nur einmal ausgeführt. ** **. Natürlich ist es nach 3 Sekunden dasselbe, so dass Sie eine doppelte Verarbeitung verhindern können.
Recommended Posts