Question

我不明白为什么我可以打印console.log(imgs)但我无法打印console.log(imgs[0])

$(function() {
    var imgs = [];
    var dir = "images/";
    var fileextension = ".png";

    $.ajax({
        url: dir,
        success: function (data) {
            $(data).find("a:contains(" + fileextension + ")").each(function () {
                var filename = this.href.replace(window.location.host, "").replace("http://", "");
                imgs.push(dir+filename);
            });
        }
    });

    console.log(imgs);//ok
    console.log(imgs[0]);//undefined
    //$('body').css({'background-image': 'url(images/' + imgs[Math.floor(Math.random() * imgs.length)] + ');'});
});

Answer 1

ajax方法是异步的，因此您需要使用回调函数在ajax调用后使用imgs变量。或者您可以在success function内移动代码，如下所示：

$(function() {
    var imgs = [];
    var dir = "images/";
    var fileextension = ".png";
    $.ajax({
        url: dir,
        success: function (data) {
            $(data).find("a:contains(" + fileextension + ")").each(function () {
                var filename = this.href.replace(window.location.host, "").replace("http://", "");
                imgs.push(dir+filename);
            });

            console.log(imgs);//ok
            console.log(imgs[0]);//undefined
            //$('body').css({'background-image': 'url(images/' + imgs[Math.floor(Math.random() * imgs.length)] + ');'});
        }
    }); 
});

Answer 2

那是因为Ajax是异步的，JavaScript是同步的。

您需要在成功回调函数中使用console.log。

Answer 3

默认情况下$.ajax以异步方式运行。如果您添加更多控制台日志，如下例所示：

$(function() {
var imgs = [];
var dir = "images/";
var fileextension = ".png";
console.log('telling jquery to load some data')
$.ajax({
    url: dir,
    success: function (data) {
        console.log('data loaded');
        $(data).find("a:contains(" + fileextension + ")").each(function () {
            var filename = this.href.replace(window.location.host, "").replace("http://", "");
            imgs.push(dir+filename);
        });
        console.log('data parsed');
    }
});

console.log("try to print images", imgs[0]);
//$('body').css({'background-image': 'url(images/' + imgs[Math.floor(Math.random() * imgs.length)] + ');'});
});

当您尝试打印尚未加载的imgs[0] ajax时，您会看到。

javascript数组项未定义

3 个答案: