javascript - 如何将一项功能分配给集合中的所有项目？

Question

如何将一个函数分配给集合中的所有项目？

我有一个 setInterval 函数，我想将它分配给集合中的所有 HTML 元素

document.addEventListener("DOMContentLoaded", function() {
  // THIS IS MY FUNCTION
  var interval = setInterval(function() {
    var number = parseInt(this.innerText, 10);
    number++;
    this.innerText = number;
  }, 1000);

  // this is my attempt TO assign one function to all items in the collection
  var counter = document.querySelectorAll('.counter');

  for (var i = 0; i < counter.length; i++) {
    counter[i].addEventListener("DOMContentLoaded", interval);
  }
});

<div class="counter" data-number="100">0</div>
<div class="counter" data-number="500">0</div>
<div class="counter" data-number="600">0</div>

我希望每个具有“.counter”类的 html 元素都有自己的名为“interval”的函数

Answer 1

您需要为该函数创建一个引用，window.setInterval 仅返回一个数字 ID，以便可能清除计时器。

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

document.addEventListener("DOMContentLoaded", function() {

  var fn = function() {
    setInterval(() => {
      var number = parseInt(this.innerHTML, 10);
       number++;
       this.innerHTML= number;
    }, 1000);
   }

  var counter = document.querySelectorAll('.counter');
  
  for (var i = 0; i < counter.length; i++) {
    fn.call(counter[i]);
  }
});

<div class="counter" data-number="100">0</div>
<div class="counter" data-number="500">0</div>
<div class="counter" data-number="600">0</div>