来自 flickr 的图像数组未按预期顺序显示答案

【问题标题】：Array of images from flickr not showing in the intended order来自 flickr 的图像数组未按预期顺序显示
【发布时间】：2015-01-29 18:01:13
【问题描述】：

我想先声明一下，我是一个 JS 的初学者，现在才使用它几天。

这是我正在使用的 http://jsfiddle.net/joyroyxw/

我想做的是获取一个人的名字并显示他们名字中每个字母的图像。到目前为止，我能够将名称拆分为单个字母，并将“字母”连接为搜索标签，以便 flickr 返回每个字母的图像。

我的问题是这些图片没有按顺序添加，这可能是因为一个查询的加载速度比另一个查询快吗？如何添加缓冲区或延迟以便按顺序显示每个字母？如果我的 for 循环按顺序将标签发送到函数，为什么会这样做？

来自 jsfiddle 的 Javascript：

function getQueryStringVar(name){
    var qs = window.location.search.slice(1);
    var props = qs.split("&");
    for (var i=0 ; i < props.length;i++){
        var pair = props[i].split("=");
        if(pair[0] === name) {
            return decodeURIComponent(pair[1]);
        }
    }
}

function getLetterImage(tag){

var flickerAPI = "https://www.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

            $.getJSON( flickerAPI, {
                tags: tag,
                tagmode: "all",
                format: "json"
            })
            .done(function (flickrdata) {
                //console.log(flickrdata);
                var i = Math.floor(Math.random() * flickrdata.items.length);
                var item = flickrdata.items[i];
                var url = item.media.m;
                console.log(url);
                $("body").append("<img src="+ url + "></img>");
                });

}

$(document).ready(function() {
        var name = getQueryStringVar("name") || "Derek";

            var str = "letter,";
            var searchtags = new Array()
            for (var i = 0; i < name.length; i++) {
                //console.log(str.concat(searchtags.charAt(i)));
                searchtags[i] = str.concat(name.charAt(i));
            }
            for (var j = 0; j < name.length; j++){
            //getLetterImage(searchtags[j]);
            getLetterImage(searchtags[j]);
            }

});

【问题讨论】：

标签： javascript jquery flickr

【解决方案1】：

不要使用追加，而是尝试使用已经构建的占位符元素来接收数据。

<div id="img1">Loading</div>
<div id="img2">Loading</div>
<div id="img3">Loading</div>

您可以根据需要使用 javascript 动态创建元素。然后按顺序填充它们。只需在执行过程中递增 i。

$("#img"+i).html("<img src="+ url + "></img>");

更新

您的 jsfiddle 非常接近，但您必须记住 ajax 是异步的。

html

<body>
    <h1>Hi! What's your name?</h1>

    <form action="trending.html">
        <input class="textbox" type="text" name="name">
    </form>

    <div id="img0">Loading</div>
    <div id="img1">Loading</div>
    <div id="img2">Loading</div>
    <div id="img3">Loading</div>
    <div id="img4">Loading</div>

  </body>

javascript

function getQueryStringVar(name){
    var qs = window.location.search.slice(1);
    var props = qs.split("&");
    for (var i=0 ; i < props.length;i++){
        var pair = props[i].split("=");
        if(pair[0] === name) {
            return decodeURIComponent(pair[1]);
        }
    }
}

function getLetterImage(tag, theNumber){

var flickerAPI = "https://www.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

            return $.getJSON( flickerAPI, {
                tags: tag,
                tagmode: "all",
                format: "json"
            })
            .then(function (flickrdata) {
                //console.log(flickrdata);
                var i = Math.floor(Math.random() * flickrdata.items.length);
                var item = flickrdata.items[i];
                var url = item.media.m;
                $("#img"+theNumber).html("<img src="+ url + "></img>");
                }); 
}



$(document).ready(function() {
        var name = getQueryStringVar("name") || "Derek Martin";

            var str = "letter,";
            var searchtags = new Array()
            for (var i = 0; i < name.length; i++) {
                searchtags[i] = str.concat(name.charAt(i));
            }
            for (var j = 0; j < name.length; j++){
                getLetterImage(searchtags[j], j);

            }


});

【讨论】：

这对我不起作用，我可能误解了你所说的：/ 这就是我所拥有的：jsfiddle.net/zjm3qvhd