Javascript не может иметь несколько функций setTimeout в цикле

Question

У меня есть этот сегмент кода, который позволяет вам устанавливать изменения CSS с временной задержкой. Он отлично работает, за исключением того, что он позволяет вам иметь только один экземпляр, а мне нужно, чтобы он позволял многим. В настоящее время он просто берет последний элемент из цикла и сохраняет функцию тайм-аута. Есть ли способ позволить ВСЕМ функциям таймаута из этого цикла быть сохраненными и запущенными? Я думаю, что просто функция setTimeout переопределяется каждый раз, а не является уникальной функцией.

Примечание: я не получаю ошибок консоли

Javascript (внутри функции загрузки)

  elems = _('[data-timecss]'); //function to return elems via querySelectorAll()
  for (var i=0; i<elems.length; i++) {
     var tempelem = elems[i];
     var c_info = elems[i].dataset.timecss.split(","); //split to get time
     setTimeout(function() {
       var css_e = c_info[1].split(";"); //split to get css properties
       for (var c=0; c<css_e.length; c++) {
         var css_elem = css_e[c].split(":"); //split property and value
         tempelem.style.setProperty(css_elem[0], css_elem[1]); //set value
       }
     }, c_info[0]); //set time
  }

HTML

<div class="block">
  <p data-timecss="2000,color:green;font-weight:bold;">Change to green after 2000ms</p>
  <p data-timecss="5000,display:none;">Hide this block after 5000ms</p>
</div>

Независимо от того, будет ли data-timecss последним, он будет работать правильно. Так что я могу сказать, что функция тайм-аута просто переопределяется каждый раз. У кого-нибудь есть идеи о том, как сделать их уникальными, но при этом сохранить их такими же динамичными, как у меня?

Answer 1

Вам нужно закрытие - Как работают JavaScript-замыкания?

elems = _('[data-timecss]'); //function to return elems via querySelectorAll()
for (var i=0; i<elems.length; i++) {
    (function(i) { // added this
        var tempelem = elems[i];
        var c_info = elems[i].dataset.timecss.split(","); //split to get time
        setTimeout(function() {
            var css_e = c_info[1].split(";"); //split to get css properties
            for (var c=0; c<css_e.length; c++) {
                var css_elem = css_e[c].split(":"); //split property and value
                tempelem.style.setProperty(css_elem[0], css_elem[1]); //set value
            }
        }, c_info[0]); //set time
    }(i)); // added this
}