在javascript中制作同步function?
我想像jQuery的$.ajax({ .., async: false, .. });
那样同步函数$.ajax({ .., async: false, .. });
。
function A() { lalala .. }; function B() { dadada .. }; function C() { .. };
那些都包括fadeIn,Out,slide等等。
但是我刚刚发现这些函数如下所示。
A(); B(); C();
所有效果几乎同时开始。 在我的理解中,这是因为函数同步调用但并不意味着函数B()在函数A()完全完成后启动..对吗?
那么,我怎样才能使这些function按顺序工作呢?
我找到了一种使用回调函数的方法,但这对我来说还不够..
看看使用jQuery $.Deferred();
这可以允许您按顺序运行每个函数,一个等待另一个。 例如:
var a = function() { var defer = $.Deferred(); console.log('a() called'); setTimeout(function() { defer.resolve(); // When this fires, the code in a().then(/..../); is executed. }, 5000); return defer; }; var b = function() { var defer = $.Deferred(); console.log('b() called'); setTimeout(function () { defer.resolve(); }, 5000); return defer; }; var c = function() { var defer = $.Deferred(); console.log('c() called'); setTimeout(function () { defer.resolve(); }, 5000); return defer; }; a().then(b).then(c);
使用defer.resolve();
意味着您可以控制函数何时执行下一个函数。
您确实指定了三个同步函数,这意味着B仅在A完成时触发。
但是,执行异步任务(如启动动画)不会阻止A完成,因此看起来B不会等到完成。
阅读有关jQuery Deferreds的内容。 Deferreds是一种设计模式,因此它并不特定于jQuery,但是它们具有很好的实现。
function methodA () { var dfd = $.Deferred(); console.log('Start A'); // Perform async action, like an animation or AJAX call $('#el').slideOut(2000, function () { // This callback executes when animation is done. console.log('End A'); dfd.resolve(); }); // Return unchangeable version of deferred. return dfd.promise(); }; function methodB () { console.log('Start B'); }; methodA().then(methodB);
我想每个函数都会产生一些ajax请求或动画
function A() { return $.ajax(....); // or // return $('#animate').animate({ width: 100 }, 1000 ).promise(); // or // var def = $.Defered(); // in async function def.resolve(); // return def.promise(); } function B() { return $.ajax(....); // or // return $('#animate').animate({ width: 200 }, 3000 ).promise(); // var def = $.Defered(); // in async function def.resolve(); // return def.promise(); } function C() { return $.ajax(....); // or // return $('#animate').animate({ width: 300 }, 1000 ).promise(); // var def = $.Defered(); // in async function def.resolve(); // return def.promise(); } $.when(A(), B(), C(), function (aRes, bRes, cRes) { }) //C().then(B()).then(A()).done(function () { // console.log('DONE'); //});
有关更详细的答案,请说明您的function