javascript - 为什么 Flickr public feed API 在通过 jQuery 访问时在显示照片结果之前返回 "undefined"？

Question

我最近开始使用 API/Ajax/JSON，并开始了一个小项目来测试我的知识。

我做了一个简单的网站，你可以在其中输入一个词到一个表单中，它会返回与该词相关的 Flickr 照片。

它工作得很好，但它总是在第一张照片之前包含一个简单的“未定义”，这会干扰第一行图片的显示。

可以在这里看到一个示例，只需搜索照片标签，您就会明白我在说什么:

http://codepen.io/anon/pen/jPExNm

这是相关的 jQuery:

$('form').submit(function (evt) {
evt.preventDefault();
// the AJAX part
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var query = $('#photoQuery').val();
var flickrOptions = {
  tags: query,
  format: "json"
};
function displayPhotos(data) {
  var photoHTML;
  $.each(data.items,function(i,photo) {
    photoHTML += '<div class="photo">';
    photoHTML += '<a href="' + photo.link + '" class="image">';
    photoHTML += '<img src="' + photo.media.m + '"></a></div>';
  }); // end each
  $('#photoGallery').html(photoHTML);
}
$.getJSON(flickerAPI, flickrOptions, displayPhotos);

}); // end submit

我在 Javascript 控制台中没有发现任何与此相关的错误，并且在谷歌搜索时也找不到类似的错误，所以我求助于 StackOverflow。感谢您提供的所有帮助。

Answer 1

因为

var photoHTML;

和

是一样的

var photoHTML = undefined;

你在做什么的基本例子

var str;
str = str + "123"; // undefined + "123" = "undefined123";

需要设置为空字符串

var photoHTML = "";