Javascript элемент массива не определен

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 выполняется асинхронно. Если добавить больше журналов консоли, как в этом примере:

$(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] Аякса еще не загружен.

Answer 2

Метод ajax является асинхронным, так что вам нужно использовать функцию обратного вызова использовать imgs переменная после вызова ajax. Или вы можете переместить свой код внутри 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 3

Это потому, что Ajax является асинхронной и JavaScript является синхронным.

Вам нужно console.log выполнить функцию обратного вызова.