Question

我想像jQuery＆＃39; s $.ajax({ .., async: false, .. });那样同步函数。

function A() { lalala .. };
function B() { dadada .. };
function C() { .. };

，那些都包括fadeIn，Out，slide等等。

但是我刚刚发现这些函数如下所示......

A();
B();
C();

所有效果几乎同时开始。根据我的理解，这是因为函数同步调用，但它并不意味着函数B（）在函数A（）完全完成后启动..对吗？

然后，我该如何使这些功能按顺序工作？

我找到了一种使用回调函数的方法但对我来说还不够......

Answer 1

查看使用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();意味着您可以控制函数何时执行下一个函数。

Answer 2

您确实指定了三个同步函数，这意味着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);

Answer 3

我想每个函数都会产生一些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');  
//});

如需更详细的解答，请说明您的功能

在javascript中制作同步功能？

3 个答案: