【发布时间】：2023-03-03 03:28:01
【问题描述】：
我想做的是创建一个动态的图像墙。
我正在做的是这样的：
- 调用 API 以获得一些响应。根据响应创建对象数组
- 基于数组，为每个包含
img的对象制作 HTML 元素。 - 创建所有这些 HTML 元素后，将其附加到 DOM，然后调用最终函数。
这是我到目前为止的内容（截断以了解重点）：
编辑：代码发生了一些变化。滚动到问题底部以获取当前代码的链接。
// based on one post, construct the html and return it
function getOneHtml(post, w) {
console.log("getting one html");
var outerDiv = $("<div>", {class: "brick"});
outerDiv.width(w);
var img = $("<img />");
img.attr("src", post.img_src);
img.on('load', function() {
console.log("img loaded");
var ratio = this.width / w;
h = this.height / ratio;
$(this).css({'height': h});
// ...
// ...
// create the element
// an alternative I'm using for now is directly append
// the created HTML onto the page, but that results
// in a kinda messy interface.
return outerDiv[0].outerHTML;
});
}
// queries an api and then calls callback after everything is done
function requestData(subreddit, callback) {
// array of objects with link to image, post title, link to reddit
posts = [];
var w = $(window).innerWidth() / 3,
html = ''; // holds all of the inner HTML for all elements
$.get("url here", function(data) {
var arr = data.data.children;
arr.forEach(function(res_post) {
console.log("looping in requestData");
// prepare a post object
// ...
// ...
html += getOneHtml(post, w); // get the HTML for this post
});
// this should happen after everything else is done
console.log("calling callback");
callback(html);
});
}
// complete the DOM
function makeWall(html) {
console.log("making wall");
// do stuff
}
现在控制台中的程序轨迹是这样的：
looping in requestData
getting one html
looping in requestData
getting one html
... // bunch of times
calling callback
making wall
(20) img loaded
所以现在的问题是，在加载每个图像之前都没有准备好 HTML，因此它实际上并没有附加到 DOM。
如何确保事情按照我希望的顺序发生？我尝试将代码重构为更多的异步风格，但没有奏效（不是我的强项）。
我也尝试查看$.Deferred，但我不明白它，以及如何将它集成到我的代码中。
感谢任何帮助。
编辑：
我认为看看我在做什么可能会有所帮助：http://karan.github.io/griddit/
加载时，我希望图像先加载，然后淡入。目前，它们显示，然后隐藏，然后淡入。这是来源：https://github.com/karan/griddit/blob/gh-pages/js/main.js。
此外，如果您向下滚动一页或两页，然后再向上滚动，一些图像会显示在其他图像后面。
【问题讨论】：
-
你读过learn.jquery.com/code-organization/deferreds 和html5rocks.com/en/tutorials/es6/promises 吗？也许这有助于更好地理解 Promise。
-
getOneHtml目前有效吗？callback和makeWall执行什么角色？一样，相似？ -
@FelixKling 是的，但正如我所说，我没有真的理解它。
-
@guest271314 是的
getOneHtml工作得很好。在这种情况下，callback是makeWall。 -
如果未设置其他维度，它可以工作。在此处查看演示：jsfiddle.net/jfriend00/Ju2Rs
标签： javascript jquery asynchronous jquery-events jquery-deferred