乱序执行的 Javascript 代码，我可以修复它吗？

Question

我正在尝试让这段代码正常工作，但它似乎出现了故障。我在控制台日志中注意到了这一点。

<script>
            var wrapper = document.getElementById("myHTMLWrapper");
            var myHTML = '';
            var databaseRef = firebase.database().ref('items/');
            databaseRef.once('value', function(snapshot)
            {
              snapshot.forEach(function(childSnapshot) 
              {
                var childKey = childSnapshot.key;
                var childData = childSnapshot.val();
                myHTML += '<div class="card">';
                myHTML += '<div class="card-body">';
                var urlimage = '';
                storageRef.child('images/'+ childData.id +'.jpg').getDownloadURL().then(function(url){
                    urlimage = url;
                    console.log(urlimage);
                });
                console.log('url outside of function is: '+urlimage);
                myHTML += '<img src="'+ urlimage +'" class="img-thumbnail" height="">';
                console.log('images/'+ childData.id +'.jpg');
                myHTML += '<h4>'+ childData.sku + ' - ' + childData.name +'</h4>';
                myHTML += '</div>';
                myHTML += '</div>';
              });
              wrapper.innerHTML = myHTML;
            });
          </script>

看起来代码正在运行 console.log('url outside of function is: '+urlimage);在运行 console.log(urlimage) 之前；

我对 Javascript 还不太熟悉，希望能在这方面得到一些帮助。

谢谢!!!

Answer 1

storageRef.child('images/'+ childData.id +'.jpg').getDownloadURL().then(function(url){
                urlimage = url;
                console.log(urlimage);
            });

您提供的代码中的上述代码实际上使用了 Promises。在处理异步数据(例如来自服务器的数据)时，您通常会使用 promises。在处理该段代码的同时，正在执行其他代码行，从而导致您所观察到的情况。异步代码的行为通常无法预测。

要使用 urlimage，您可以这样做。

storageRef.child('images/'+ childData.id +'.jpg').getDownloadURL().then(function(url){
myHTML += '<img src="'+ url +'" class="img-thumbnail" height="">';
        });