Question

我想作为JS的初学者，前几天只使用它几天。

合作的内容

我想要的是获取一个人的姓名，并在他们的名字中显示每个字母的图像。到目前为止，我能够将名称分成单个字母，并连接＆＃34;字母，＆＃34;作为搜索标签，以便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]);
            }

});

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

            }


});

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

1 个答案: