How to prevent duplicate processing by addEventListener

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.

An example where duplicate processing occurs due to addEventListener

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".

How to prevent duplicate processing by 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

How to prevent duplicate processing by addEventListener
[Rails] How to prevent screen transition
[Processing × Java] How to use variables
[Processing × Java] How to use arrays
[Processing × Java] How to use the loop
[Processing × Java] How to use the class
[Processing × Java] How to use the function
How to implement asynchronous processing in Outsystems
[Rails] How to decide the destination by "rails routes"
How to disable user operations during asynchronous processing
How to output CSV created by Rails to S3
How to prevent direct URL typing in Rails
How to deploy
How to make duplicate check logic more readable
How to separate .scss by controller in Rails
How to use scope and pass processing (Jakarta)
How to execute processing before and after docker-entrypoint.sh
How to utilize knowledge to reduce support work by 10 to 20%
[Java] How to get the key and value stored in Map by iterative processing
How to make batch processing with Rails + Heroku configuration
How to implement login request processing (Rails / for beginners)
[Rails] How to search by multiple values ​​with LIKE
How to return to the previous screen by Swipe operation
How to remove the underline displayed by Rails link_to
How to move to the details screen by clicking the image
[Java] How to get a request by HTTP communication
How to check only one RadioButton check by default (Note)
How to start TOMCAT by specifying JAVA_HOME on Windows
[Java] How to cut out a character string character by character
[swift5] How to execute processing when tabBar is tapped
How to prevent editTextPreference of android PreferenceFragmentCompat from breaking
How to boot by environment with Spring Boot of Maven
[RSpec] How to test error messages set by Shoulda-Matchers
How to develop OpenSPIFe
How to call AmazonSQSAsync
How to use Map
How to write Rails
How to use rbenv
How to use letter_opener_web
How to use with_option
How to use fields_for
How to use java.util.logging
How to use map
How to use collection_select
How to adapt Bootstrap
How to use Twitter4J
How to use active_hash! !!
How to install Docker
How to use MapStruct
How to use hidden_field_tag
How to use TreeSet
How to write dockerfile
How to uninstall Rails
How to install docker-machine
[How to use label]
How to make shaded-jar
How to write docker-compose
How to use identity
How to use hashes
How to write Mockito
How to create docker-compose