此代码应该将#slip-container的所有子元素的显示属性切换为“阻止”,开关之间的时间延迟为两秒。
var magic = window.setInterval(function(){
if (document.readyState === "complete") {
var children = document.getElementById('slide-container').children;
for (var i = 0; children.length > i; i++ ) {
setTimeout(function(){
children[i].style.display = "block";
console.log(i);
},2000);
}
magic = window.clearInterval(magic);
} else {
console.log("...");
}
}, 1000);
我正在使用它和这个html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>
<ul id="slide-container">
<li style="display: none;"><img src="http://i.imgur.com/8qBcyzc.jpg"></li>
<li style="display: none;"><img src="http://i.imgur.com/oxMTFTF.png"></li>
<li style="display: none;"><img src="http://i.imgur.com/JTM6Yqg.jpg"></li>
</ul>
</body>
</html>
我收到错误Uncaught TypeError: Cannot read property 'style' of undefined
它说无法找到孩子或孩子[0]。但是已经指定了该变量并且存在dom节点。
答案 0 :(得分:1)
尝试在IIFE(立即调用的函数表达式)
中包含setTimeout for (var i = 0; children.length > i; i++) {
(function (index) {
setTimeout(function () {
children[index].style.display = "block";
console.log(i);
}, 2000);
})(i);
}
<强> Check Fiddle 强>
i
的引用对setTimeout
执行的所有函数都是通用的。因此,当函数内部执行时,i
的值将指向children.length
。
但是没有引用children[children.length]
的元素不存在并抛出错误。
答案 1 :(得分:1)
当setTimeout
准备就绪时i
将是children
的长度,因此您必须捕获i
试试这个
var time = 2000;
for (var i = 0; children.length > i; i++ ) {
(function( child, time) {
window.setTimeout(function() {
child.style.display = "block";
}, time);
}( children[i], time));
time += 2000;
}
或者你可以这样做。 ......我已经解决了延迟问题
var hideElement = function( element, time) {
window.setTimeout(function() {
element.style.display = 'block';
}, time);
};
var time = 2000;
for (var i = 0; children.length > i; i++ ) {
hideElement(children[i], time);
time += 2000;
}
答案 2 :(得分:1)
关闭问题。
尝试将第3个参数添加到setTimeout(不起作用):
setTimeout(function(i){
children[i].style.display = "block";
console.log(i);
}, 2000, i);
另一种形式:
var i = 0;
var timer = setInterval(function () {
children[i].style.display = "block";
i++;
if (i == children.length) {
clearInterval(timer);
}
}, 2000);
ES6即将来临,let
语句特别适用于以下情况:
for (let i = 0; children.length > i; i++ ) {
setTimeout(function(){
children[i].style.display = "block";
console.log(i);
}, 2000);
}
然而,这不是您现在需要的答案。这只是一张纸条。