JavaScript不能在一个循环中有多个setTimeout函数

JavaScript can't have multiple setTimeout functions in a loop

本文关键字：函数 setTimeout 循环 不能 JavaScript 一个      更新时间：2023-09-26

我有这段代码，它允许您在定时延迟上设置CSS更改。它工作完美，除了它只允许你有一个实例，而我需要它允许许多。它目前只从循环中获取最后一个元素，并保留timeout函数。是否有一种方法，让所有的超时函数从这个循环保存和运行?我认为这只是setTimeout函数每次被覆盖，而不是一个唯一的函数。

注意:我没有得到控制台错误

Javascript(在onload函数中)

  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- timess将正确运行。所以我知道timeout函数每次都被重写。谁有什么想法，如何使这些独特，但也保持它的动态，因为我有吗?

你需要闭包- 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
}
相关文章：