比如：

$.getScript('js/a.js',function(){ //异步加载，不会影响后续代码执行。可能会产生一个问题，alert(2)先执行了a.js还没有加载完 }) $(function () { alert(2);//先弹2，后弹出1 });

很多时候引入外部文件的时候，都想等外部文件或者插件加载完，再去触发操作，操作可能用到a.js。现在这个顺序不对，会出问题。

怎样解决这个问题？用holdReady()方法。

$.holdReady(true); //在这里先hold住 $.getScript('js/a.js', function () { //异步加载，不会影响后续代码执行。可能会产生一个问题，alert(2)先执行了a.js还没有加载完 $.holdReady(false); //加载完释放，不hold了就可以弹2了 }) $(function () { alert(2);//先弹2，后弹出1 });

再深入一点，holdReady() 要针对的文件可能不止一个，有很多个，所以要等所有的文件都加载完再执行，所以源码中有一个计数的readyWait。

源码中定义了一个等待栈变量——readyWait，每次执行$.holdReady(true)都会增加压栈，而每次$.holdReady()执行都会弹栈，等空栈的时候就执行jQuery.ready函数，即将promise给resolve掉。

// Is the DOM ready to be used? Set to true once it occurs. isReady: false, // A counter to track how many items to wait for before // the ready event fires. See #6781 readyWait: 1, //第二步看这里 //holdReady推迟DOM的触发 // Hold (or release) the ready event holdReady: function( hold ) { if ( hold ) { jQuery.readyWait++;//hold为真，让readyWait加加处理 } else { jQuery.ready( true ); } }, // Handle when the DOM is ready ready: function( wait ) { //参数和holdReady有关 // Abort if there are pending holds or we're already ready //readyWait为0时就不用hold了，执行后面的操作 if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) { return; } // Remember that the DOM is ready jQuery.isReady = true; //默认是false // If a normal DOM Ready event fired, decrement, and wait if need be if ( wait !== true && --jQuery.readyWait > 0 ) { return; } //第一步看这里重点，resolveWith改变状态的时候传参了，给done中方法fn传入了参数， //document是fn的this指向,jQuery是参数 // If there are functions bound, to execute readyList.resolveWith( document, [ jQuery ] ); //跟主动触发有关 // Trigger any bound ready events if ( jQuery.fn.trigger ) { jQuery( document ).trigger("ready").off("ready"); } },

刚开始看源码，很多地方理解也不到位，解释可能也不清楚。

分享给小伙伴们：

本文标签： DOM，jquery/">DOM，jquery

相关文章

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻