javascript - HTML内联和外部脚本未按正确顺序加载

Question

我运行两个脚本。1是外部的，我需要它先运行。第二个是内联，我需要它运行第二个。我已经读过，不管怎样，浏览器都会按照正确的顺序运行它们，这取决于它们在代码中的位置，但事实并非如此。我在每个控制台前面放了一个惟一的console.log（）来查看它们运行的时间，以及外部之后的内联脚本，但是控制台每次都会首先显示内联运行。如果我将第二个脚本放入外部源，它们将正确运行。不过，对我来说，让它保持在线比较容易。为什么不起作用，我怎么能先保证外部运行？

<script src="myurl.com/firstfile.js"></script> <!-- contains console.log("1st script") -->
<script type="text/javascript">

        console.log("2nd script");
            //trying to get variable from firstfile.js but doesn't work for me because it is running second
</script>

当我第二次运行它时，它确实工作了，因为我需要的变量随后被加载。每次运行后都能正常工作。也许是因为变量是一个大的json表，它需要更长的时间，但它不应该这样做。

Answer 1

根据你的密码笔密码，你的密码是正确的。为了确保您可以更改其中一个控制台日志。

<script src="https://cdn.jsdelivr.net/gh/Bazoogle/live-alert-anim/twitch/donation-lottie2.1.min.js" type="application/javascript"></script>
<script type="text/javascript">
  					  
  		console.log("please work #2");
            var name =  document.getElementById('name').innerHTML;
						var text1 = name.toUpperCase();
            var amount = document.getElementById('amount').innerHTML;
            var text2 = amount.replace("$", "");
            
			donation1.layers[0].t.d.k[0].s.t = "\r"+text2;
			donation1.layers[2].t.d.k[0].s.t = text1;

			var animation = lottie.loadAnimation({
				container: document.getElementById('anim'),
				renderer: 'svg',
				loop: false,
				autoplay: true,
					rendererSettings: {
   			 	progressiveLoad: false
				},
				animationData: donation1,
			});
</script>

如你所见，它确实有效。只需打开开发人员控制台并运行代码。您将看到外部脚本中的“please work”，内联脚本中的“please work#2”。