jQuery ready回调函数的执行 |

1月 9, 2018 | Nix.Huang

jQuery 推荐我们使用$(function(){})代替原来的window.onload=function(){} 这种方式，众所周知，$(callback)比后者能更早执行，前者只要dom结构加载完毕就可以执行，而后者需要整个页面加载完成，比如图片等元素加载后才会执行。所以前者能加快页面的响应速度。

在jquery-3.2.1.js 版本中该功能是通过Deferred对象实现的
Deferred的原理参考JQuery Deferred对象源码分析

// The deferred used on DOM ready
var readyList = jQuery.Deferred();
jQuery.fn.ready = function( fn ) {
	readyList.then( fn )
	...
};
	
function completed() {
	document.removeEventListener( "DOMContentLoaded", completed );
	window.removeEventListener( "load", completed );
	jQuery.ready();
}

// DOMContentLoaded事件或者load事件为页面ready的标志，如果该事件发生回调completed
document.addEventListener( "DOMContentLoaded", completed );
// A fallback to window.onload, that will always work
window.addEventListener( "load", completed );

//触发readyList
ready: function( wait ) {
      ...
	readyList.resolveWith( document, [ jQuery ] );
}

// The deferred used on DOM ready

var readyList = jQuery.Deferred();

jQuery.fn.ready = function( fn ) {

readyList.then( fn )

...

};

function completed() {

document.removeEventListener( "DOMContentLoaded", completed );

window.removeEventListener( "load", completed );

jQuery.ready();

}

// DOMContentLoaded事件或者load事件为页面ready的标志，如果该事件发生回调completed

document.addEventListener( "DOMContentLoaded", completed );

// A fallback to window.onload, that will always work

window.addEventListener( "load", completed );

//触发readyList

ready: function( wait ) {

...

readyList.resolveWith( document, [ jQuery ] );

}

本文由javacoder.cn整理转载注明出处

Posted in: WEB开发

知行合一，止于至善

jQuery ready回调函数的执行

站内搜索