<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>js执行顺序</title> <div id="a"></div> <script src="/Scripts/jquery-1.9.1.min.js"></script> </head> <body> <script> console.log("-- 申明事件 --"); /* * 等价于 $(document).ready(function(){}) * 当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。 */ $(function () { console.log("执行 $(function () {}"); }); console.log("-- 申明变量 --"); var varA = "a"; var varB = 1; var varC = [varA, varB]; var varD = { a: varA, b: varB, c: varC }; console.log("-- 申明方法或对象 --"); /* * 方法或对象 * */ function fa() { console.log("执行 方法 fa"); this.a = function () { console.log("fa 中的 a方法"); } } //将fa作为方法来处理 fa(); //将fa作为对象来处理 var a = new fa(); a.a(); console.log("-- 闭包的研究 --"); /*匿名函数*/ (function () { console.log("匿名函数 不返回任何对象"); })(); var b = (function () { var model = { a: 1 }; return model; })(); console.log("匿名函数 返回一个对象", b); var c = (function () { var model = function () { }; model.prototype.a = function () { console.log("匿名函数返回的类中，再申明一个方法", this); } return model; })(); console.log("匿名函数 返回一个方法", c); var d = new c(); d.a(); //回调解决方案 https://www.cnblogs.com/beimingbingpo/p/8548986.html $.ajax({ url: "test.json", type: "get" }).done(function (data) { console.log(1); }).fail(function () { console.log(2); }); function Ajax(option) { var dfdAjax = $.Deferred(); console.log(1); $.ajax({ url: "test.json", type: "get" }).done(function () { console.log("dfdAjax.resolve()"); dfdAjax.resolve(); }).fail(function () { console.log("dfdAjax.reject()"); dfdAjax.reject(); }); return dfdAjax.promise(); }; Ajax().done(function () { console.log(3); }).fail(function () { console.log(4); }); function Ajax2(option) { var dfdAjax2 = $.Deferred(function () { console.log(1); $.ajax({ url: "test.json", type: "get" }).done(function () { console.log("dfdAjax2.resolve()"); dfdAjax2.resolve(); }).fail(function () { console.log("dfdAjax2.reject()"); dfdAjax2.reject(); }); }); return dfdAjax2; }; Ajax2().resolve(); Ajax2().done(function () { console.log(5); }).fail(function () { console.log(6); }); var dfd = $.Deferred(); dfd.done(function (value) { console.log("$.Deferred().done()"); }) console.log("dfd.resolve"); dfd.resolve(); console.log("dfd.resolve"); dfd.resolve(); var dfd2 = $.Deferred(); dfd2.fail(function () { console.log("$.Deferred().fail()"); }); console.log("dfd2.reject"); dfd2.reject(); console.log("--$.Deferred()--"); </script> //步骤很多的回调 <script type="text/javascript"> var array = []; array.push(function () { return $.ajax({ url: "test.json", type: "get" }).then(function () { console.log(1); }); }); array.push(function () { return $.ajax({ url: "test.json", type: "get" }).then(function () { console.log(2); }); }); array.push(function () { return $.ajax({ url: "test.json", type: "get" }).then(function () { console.log(3); }); }); function doAll(array, i) { if (!i) i = 0; if (i < array.length - 1) { array[i]().then(function () { doAll(array, i + 1) }); } else { array[i](); } } doAll( array); </script> </body> </html> 常见代码
--未完待续--