Javascript flickr中未按预定顺序显示的图像数组

我想先说一句，我是JS的初学者，现在才开始使用它几天

---

这就是我的工作

我想做的是得到一个人的名字，并显示他们名字中每个字母的图像。 到目前为止，我已经能够将名称拆分为各个字母，并将“字母”作为搜索标记连接起来，以便flickr返回每个字母的图像

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

---

来自JSFIDLE的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]);
            }

});

函数getQueryStringVar（名称）{ var qs=window.location.search.slice（1）； var props=定量拆分（&）； 对于（变量i=0；i不要使用append，而是尝试使用已生成的占位符元素来接收数据

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

加载
加载
加载

您可以根据需要使用javascript动态创建元素。然后按顺序填充它们。只要在你走的时候增加i

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

$（“#img”+i）.html（“”）；

更新

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

html

你好你叫什么名字？
加载
加载
加载
加载
加载

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

            }


});

函数getQueryStringVar（名称）{ var qs=window.location.search.slice（1）； var props=定量拆分（&）； 对于（变量i=0；i这对我不起作用，我可能误解了你所说的：/以下是我所拥有的：

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

            }


});