一个通用onReady函数的实现

最新推荐文章于 2024-09-04 14:39:58 发布

转载最新推荐文章于 2024-09-04 14:39:58 发布 · 170 阅读

本文讨论了在JavaScript中处理DOM加载事件监听时遇到的异步问题，特别是当尝试在AMD模块中定义ready函数时的问题。文章详细解释了在不同浏览器环境下，如何正确地在DOM元素完全加载后执行回调函数，避免了由于异步加载的JavaScript文件导致的事件监听未被触发的问题。

define([], function(){
 
    function onReady(fn) {
        var DOC = document,
            html = DOC.documentElement,
            W3C = document.dispatchEvent;
        //FF曾经是没有readyState属性的
        //推断body是否存在来决定DOM文档是否载入完成
        if (!DOC.readyState) {
        var readyState = DOC.readyState = DOC.body ? "complete" : "loading";
        }
        //假设页面已经全然载入完成直接运行回调函数
        if (DOC.readyState === "complete") {
            setTimeout(fn);
        //现代游览器和IE>=IE9
        } else if (W3C) {
            DOC.addEventListener('DOMContentLoaded', function(){
                if (readyState) {
                    DOC.readyState = 'complete';
                }
                fn();
            }, false);
        } else {
            ieReady(fn);
        }
    }

    function ieReady(fn) {
       try {
           //处理iframe中的页面在IE下无法通过doScroll推断DOM知否载入完成
           if (self !== top && self.document.readyState !== 'complete') {
               setTimeout(function(){
                     ieReady.call(window, fn)
                 })
           } else if (self !== top && self.document.readyState === 'complete') {
               arguments[0]();
           } else {
               document.documentElement.doScroll('left');
                 arguments[0]();
           }
         } catch (e) {
             setTimeout(function(){
                 ieReady.call(window, fn)
             })
       }
   };

   AS.extend({
       'onReady': onReady
   });
   return onReady;
})

修正一个重大bug,ready函数是不能在AMD中定义从而异步载入的,由于DOMContentLoaded监听的触发时机是在DOM和JS.CSS载入运行完成后,但有一个例外就是JS假设是动态载入进来的,DOMContentLoaded不会等待这个异步载入的js,所以假设将绑定DOMContentLoaded事件的函数写在动态载入的js中,有一个可能就是Dom已经载入完成但动态载入的js中的为DOMContentLoaded绑定监听的代码还没有运行,所以非常有可能你为DOMContentLoaded绑定的监听不会运行.