Javascript 循环中不能有多个 setTimeout 函数
Javascript can't have multiple setTimeout functions in loop
我有这段代码允许您设置 CSS 定时延迟更改。它工作完美,只是它只允许您拥有一个实例,而我需要它允许多个实例。它目前只从循环中取出最后一个元素并保持超时功能。有没有办法让这个循环中的所有超时函数都被保存并运行?我在想,这只是 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-timecss 是最后一个,都会 运行 正确。所以我可以说超时函数每次都被覆盖了。有没有人对如何使这些独特的东西有任何想法,同时又像我一样保持它的动态?
你需要关闭 - 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
}
我有这段代码允许您设置 CSS 定时延迟更改。它工作完美,只是它只允许您拥有一个实例,而我需要它允许多个实例。它目前只从循环中取出最后一个元素并保持超时功能。有没有办法让这个循环中的所有超时函数都被保存并运行?我在想,这只是 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-timecss 是最后一个,都会 运行 正确。所以我可以说超时函数每次都被覆盖了。有没有人对如何使这些独特的东西有任何想法,同时又像我一样保持它的动态?
你需要关闭 - 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
}