为什么当被jQuery访问时，Flickr公共提要API在显示照片结果之前返回“未定义”？

Question

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

我做了一个简单的网站，您在其中输入一个单词到表格中，它带回与该单词相关的Flickr照片。

它的效果很好，但是在第一张照片之前总是包含一个简单的“ undefined”，与第一行图片的显示混乱。

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

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 = "";