javascript - js 加载顺序的问题？

问题描述

问 题

为什么global.width 会的到undefined，网页的加载顺序不是自上而下的吗？

<script>
var global = {};

(function(){
   var action = function() {
       global.width = document.documentElement.clientWidth;
   }
   document.addEventListener("DOMContentLoaded", action, flase);
})();
</script>

<script>
   alert(global.width);  //undefined ??
</script>

解决方案

<script>
var global = {};//A

(function(){
   var action = function() {//D
       global.width = document.documentElement.clientWidth;
   }
   document.addEventListener("DOMContentLoaded", action, flase);
})();//B
</script>

<script>
   alert(global.width);  //undefined ?? c
</script>

A.声明并初始化一个global变量
B.定义了一个立即执行函数，函数被马上执行，为document添加了对DOMContentLoaded的绑定，绑定的函数为action
C.执行本地alert组件,width在global对象中是不存在的
D.等到DOMContentLoaded事件发生时，action回调函数才会被调用

JS事件异步调用且单线程执行，必须等到当前的同步代码执行完毕后，事件的回调才有可能被回调；同理一个事件回调函数被执行，其它JS代码是没机会执行

这篇关于javascript - js 加载顺序的问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！