javascript - while 循环不适用于 $.each

Question

关于this page我正在尝试限制显示的图像数量。我尝试了以下方法，但它总是使选项卡崩溃。

while (screenshots.length < 5) {
    $.each(images, function (i, el) {
                    startHTML += "<a href=\"" + link + "\" title=\"" + title + "\">";
                    startHTML += "<img src=\"" + el + "\" alt=\"\" width=\"200px\" height=\"200px\">";
                    startHTML += "</a>";
                });
}

图像是从 json 中提取的..完整代码:

var screenshots = $('#recent-screenshots span');



       // get screenshots we can pass limit here if we want
        $.getJSON("gallery/getScreenshots.php", function (data) {
            var startHTML = "";
            $.each(data, function (i, image) {
                var link = image.link;
                var title = image.title;
                var images = image.images;

                $.each(images, function (i, el) {
                    startHTML += "<a href=\"" + link + "\" title=\"" + title + "\">";
                    startHTML += "<img src=\"" + el + "\" alt=\"\" width=\"200px\" height=\"200px\">";
                    startHTML += "</a>";
                });


            });
            screenshots.html(startHTML);

        });
    });

我在这里做错了什么？

Answer 1

这是一个无限循环:

while (screenshots.length < 5) {
    $.each(images, function (i, el) {
                    startHTML += "<a href=\"" + link + "\" title=\"" + title + "\">";
                    startHTML += "<img src=\"" + el + "\" alt=\"\" width=\"200px\" height=\"200px\">";
                    startHTML += "</a>";
                });
}

您的 while 循环条件涉及 snapshots.length，但您永远不会在 while 循环内修改该值，因此如果条件最初为真，则它在 while 循环中永远保持为真。

您可以通过手动迭代图像并仅执行长度或 5 中较小的一个来修复此问题。

for (var i = 0, len = Math.min(images.length, 5); i < len; i++) {
    startHTML += "<a href=\"" + link + "\" title=\"" + title + "\">";
    startHTML += "<img src=\"" + images[i] + "\" alt=\"\" width=\"200px\" height=\"200px\">";
    startHTML += "</a>";

}