匿名函数中的JavaScript未定义变量_Javascript_Anonymous Function

匿名函数中的JavaScript未定义变量

javascript

匿名函数中的JavaScript未定义变量,javascript,anonymous-function,Javascript,Anonymous Function,此代码用于将#slide container的所有子元素的显示属性切换为“block”，两次切换之间有两秒的时间延迟 var magic = window.setInterval(function(){ if (document.readyState === "complete") { var children = document.getElementById('slide-container').children; for (var i

此代码用于将#slide container的所有子元素的显示属性切换为“block”，两次切换之间有两秒的时间延迟

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>

我得到错误

未捕获类型错误：无法读取未定义的属性“style”

它说找不到子对象或子对象[0]。但是已经指定了该变量，并且dom节点存在。

尝试将setTimeout封装在IIFE（立即调用的函数表达式）中

的引用对于由

setTimeout

执行的所有函数都是通用的。因此，当内部函数执行时，

的值将指向

childrence.length

但是没有引用不存在并抛出错误的

子元素[children.length]

的元素。

尝试将setTimeout封装在IIFE中（立即调用的函数表达式）

的引用对于由

setTimeout

执行的所有函数都是通用的。因此，当内部函数执行时，

的值将指向

childrence.length

但是没有一个引用

子元素[children.length]

的元素不存在并抛出错误。

当

设置超时

准备就绪时

将是

子元素的长度

，因此您必须捕获

试试这个

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;
}

当

setTimeout

准备就绪时，

将是

子项的长度

，因此您必须捕获

试试这个

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;
}

关闭问题。
尝试向setTimeout添加第三个参数（无效）：

另一种甲酸盐：

    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);
}

然而，这不是你现在需要的答案。这只是一个说明。

结束问题。
尝试向setTimeout添加第三个参数（无效）：

另一种甲酸盐：

    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);
}

然而，这不是你现在需要的答案。这只是一个注释。

此处检查可能重复的检查此处显示可能重复的图像，但同时显示所有图像。关键是下一张图片的出现有2秒的延迟。是的，我一直在期待that@Johnny哦，是的，对不起。@Johnny查看编辑。我建议只使用setInterval@Johnny没问题：）图像会同时显示，但会同时显示所有图像。关键是下一张图片的出现有2秒的延迟。是的，我一直在期待that@Johnny哦，是的，对不起。@Johnny查看编辑。我建议只使用setInterval@Johnny没问题：）第二个示例非常有效。第一个trows错误

未捕获引用错误：未定义i

。使用hideElement函数的好主意。顺便说一句，最后一个例子应该是“block”而不是“none”；]。谢谢是的，对于第一个，它仍然必须在循环中。现在两者都在工作！匿名函数很好，简单有效。第二个示例非常有效。第一个trows错误

未捕获引用错误：未定义i

。使用hideElement函数的好主意。顺便说一句，最后一个例子应该是“block”而不是“none”；]。谢谢是的，对于第一个，它仍然必须在循环中。现在两者都在工作！好主意，匿名功能，简单有效。图像一次全部显示。关键是下一个图像的出现有2秒的延迟。图像会同时显示，但所有图像都会同时显示。关键是下一个图像的出现有2秒的延迟。