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> 

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

Answer 1

вам нужно закрыть - How do JavaScript closures work?

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 
}