Operating environment Ruby 2.6.5 Rails 6.0.3.2
Previously, the same process was generated many times by addEventListener, which caused an error and sometimes I could not do what I wanted, so I posted it.
Ruby:index.html.erb
<% @hugas.each do |huga| %>
<div class="huga" >
<%= huga.content %>
</div>
<% end %>
The above code shows that the content column of huga is displayed repeatedly, and the class of the displayed content is huga.
huga.js
function hoge() {
const hugas = document.querySelectorAll(".huga");
hugas.forEach(function (huga) {
huga.addEventListener("click", () => {
//Processing that occurs by clicking
});
});
};
setInterval(hoge, 1000);
With function hoge () as the first line, we will explain this code from the second line. In the second line, all the elements whose class is huga are assigned to hugas. In the third line, hugas is divided into one by one, and their names are huga. If you click huga on the 4th line, the processing on the 5th line will occur. The last line causes the above operation every second.
In other words, the above two codes show that when you click content, the process written in the 5th line of huga.js occurs.
However, if nothing is done, an error will occur. This is because the last line of huga.js causes the second and third lines to work every second. What happens is that, for example, if you click content 10 seconds after transitioning to that page, the processing of the 5th line will occur 10 times at the same time.
To solve this problem, you need the title of this article, "How to prevent duplicate processing with 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", () => {
//Processing that occurs by clicking
});
});
};
setInterval(hoge, 1000);
Duplicate processing can be prevented by adding the 4th to 7th lines of the above code. This is because this addition means that even if you click content after a few seconds, one huga will only be processed once.
I will explain the added part in detail. First, when 1 second elapses, the first process is performed, and a conditional branch occurs due to the if statement. Since huga does not have an attribute called baz, it will be null and the conditional expression will be false, but since the processing in the case of false is not described, it will move to the next processing as it is. Line 7 gives huga the attribute baz, which is true. In other words, ** the first process is the same as before it was described. ** **
Let's look at the case where 2 seconds have passed. After 2 seconds, the second process is performed, and the if statement causes a conditional branch again. Unlike the first time, huga has an attribute called baz, so it is not null. Therefore, the conditional expression becomes true, the processing when it is true is performed, and return null is executed. Since return null means to exit the process, the process after this description will not be performed. In other words, even if you click content after 2 seconds have passed, ** processing will be performed only once. ** ** Of course, it is the same after 3 seconds, so you can prevent duplicate processing.
Recommended Posts