addEventListenerにより重複している処理を防ぐ方法

動作環境
Ruby 2.6.5
Rails 6.0.3.2

以前、addEventListenerによって同じ処理が何度も発生していたことにより、エラーが起きてしまい、思うような処理ができないことがあったので、投稿してみました。

##addEventListenerにより重複している処理が発生してしまう例

index.html.erb

<% @hugas.each do |huga| %>
  <div class="huga" >    
    <%= huga.content %>
  </div>
<% end %>

上記のコードは、hugaのcontentカラムを繰り返し表示させており、その表示されたcontentのclassはhugaであるということを表しています。

huga.js

function hoge() {
  const hugas = document.querySelectorAll(".huga");
  hugas.forEach(function (huga) {
    huga.addEventListener("click", () => {
    //クリックすることで発生する処理
    });
  });
};
setInterval(hoge, 1000);

function hoge()を１行目として、２行目からこのコードの解説をしていきます。
２行目でclassがhugaである要素をすべてhugasに代入しています。
３行目でhugasを１つずつに分けて、それらの名前をhugaとしています。
４行目でhugaをクリックすると５行目の処理を発生するようにしています。
最終行により、以上の動作を毎秒発生させています。

つまり、上記の２つのコードはcontentをクリックすると、huga.jsの５行目に書かれた処理が発生するということを表しています。

しかし、このままではエラーが起きてしまいます。なぜなら、huga.jsの最終行により毎秒２行目と３行目の動作が発生しているからです。それによって何が起こるのかというと、例えばそのページに遷移してから１０秒後にcontentをクリックした場合、５行目の処理が１０回同時に発生してしまうというようなことが起きてしまいます。

この問題を解決するために、この記事のタイトルである「addEventListenerにより重複している処理を防ぐ方法」が必要となります。

※そもそもsetIntervalではなく、window.addEventListener('load',hoge);にすれば良いのではという意見が出ると思いますが、その通りです。しかし、index.html.erbのhuga.contentにおいて非同期通信が使われている場合はsetIntervalを使う必要があります。非同期通信だとページのロードが行われないからです。

##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", () => {
    //クリックすることで発生する処理
    });
  });
};
setInterval(hoge, 1000);

重複している処理は、上記のコードの４行目から７行目を追記することで防ぐことができる。なぜなら、この追記によって何秒経過してからcontentをクリックしても、１つのhugaには１回の処理しか行わないという意味になるからです。

追記した部分を詳しく解説していきます。
まず、１秒経過すると１回目の処理が行われ、if文によって条件分岐が起きます。hugaはbazという属性(Attribute)は持っていないのでnullとなり、条件式はfalseとなりますが、falseの場合の処理は記載されていないため、そのまま次の処理に移ります。７行目によって、hugaにbazという属性が与えられ、それはtrueとなります。つまり、１回目の処理は記載する前と変わっていません。

２秒経過した場合を見ていきます。２秒経過すると２回目の処理が行われ、再度if文によって条件分岐が起きます。１回目と違い、hugaにはbazという属性を持っているため、nullではありません。そのため、条件式はtrueとなり、trueの場合の処理が行われ、return nullが実行されます。return nullとは、処理を抜け出すという意味なので、この記載以降の処理は行われなくなります。つまり、２秒経過してから、contentをクリックしても、処理が１回しか行われないようになります。
当然ですが３秒後以降も同じであるため、重複している処理を防ぐことができます。