JavaScript 抛出“无法读取属性……未定义”错误答案

【问题标题】：JavaScript throws 'cannot read property ... of undefined' errorJavaScript 抛出“无法读取属性……未定义”错误
【发布时间】：2014-12-26 06:14:22
【问题描述】：

我正在尝试构建一个基本的 JQuery 应用程序，该应用程序从 Flickr 加载图像，将它们添加到 jQuery 对象数组中，按顺序将它们添加到 DOM，淡入它们，然后在 3 秒的周期内淡出它们。但是，在我的 displayImage 函数中，我不能使用 .hide()、.fadeIn() 或 .fadeOut()，因为它会引发“未捕获的类型错误：无法读取未定义的属性 'fadeIn'”错误。这是我的代码，JS 和 HTML：

var main = function(){
"use strict";
var url = "http://api.flickr.com/services/feeds/photos_public.gne?tags=cats&format=json&jsoncallback=?";
//Creates the empty array of jQuery image objects
var images = [];
$.getJSON(url, function(flickrResponse){
    flickrResponse.items.forEach(function (photo){
        var $img = $("<img>").hide();

        $img.attr("src", photo.media.m);
        //Populates the images array with jQuery objects defined from the Flickr JSON request
        images.push($img);

        // $("main .photos").append($img);
        // $img.fadeIn();
    });
});

function displayImage(imgIndex) {
    var $displayedImg = images[imgIndex];
    $(".photos").fadeOut('slow');
    $(".photos").empty();
    $(".photos").append($displayedImg);
    $displayedImg.fadeIn('slow');
    //Function which recursively calls 'displayImage' every three seconds
    setTimeout(function(){
        imgIndex = imgIndex + 1;
        displayImage(imgIndex);
    }, 3000);
}
displayImage(0);
};

$(document).ready(main);

还有

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Flickr App</title>
  <link rel="stylesheet" type="text/css" href="stylesheets/styles.css">
</head>

<body>
  <header>

  </header>

  <main>
    <div class = "photos">
    </div>
  </main>


  <footer>
  </footer>

   <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
   <script src="js/app.js"></script>
 </body>

任何想法可能是未定义的？注意$.getJSONrequest 中的var $img = $("<img>").hide(); 行不会抛出未定义的错误！

非常感谢！

编辑：

我还尝试发出同步请求来获取 JSON，以确保在调用 displayImage 函数之前加载它，但仍然会引发相同的错误：

var main = function(){
"use strict";
var url = "http://api.flickr.com/services/feeds/photos_public.gne?tags=cats&format=json&jsoncallback=?";
var images = [];
//THIS IS WHAT HAS CHANGED
$.ajax({url: url,
        dataType: 'json',
        async: false,
        success: function(flickrResponse){
    flickrResponse.items.forEach(function (photo){
        var $img = $("<img>").hide();

        $img.attr("src", photo.media.m);

        images.push($img);

    });
}});

function displayImage(imgIndex) {
    var $displayedImg = images[imgIndex];
    $(".photos").fadeOut('slow');
    $(".photos").empty();
    $(".photos").append($displayedImg);
    $displayedImg.fadeIn('slow');

    setTimeout(function(){
        imgIndex = imgIndex + 1;
        displayImage(imgIndex);
    }, 3000);
}
displayImage(0);
};

$(document).ready(main);

【问题讨论】：

标签： javascript jquery

【解决方案1】：

在尝试displayImage(0) 之前，您需要等待 JSON 返回。 JSON 请求是异步的，因此您对 displayImage 的调用是在返回任何 JSON 之前发生的。

我建议使用 Javascript 调试器单步执行，以更好地了解正在发生的事情。然后你会看到images 是空的，因此$displayedImg 是未定义的。

【讨论】：

有道理，但是在返回 JSON 之前如何停止 displayImage 函数的执行呢？并感谢您的回答！
为什么不在 JSON 回调结束时调用 displayImage？关于您的更新，这仍然不是同步的。对 JSON 的调用本质上是异步的，这就是为什么会有 success 回调，它在请求返回时被激活。