Question

我知道这是基本的，但在查看了多个资源（例如this）后，我陷入困境。如何嵌套functionTwo以使其仅在functionOne完成后运行？这是我的尝试。（我实际上想在functionTwo中做一些更复杂的事情，我只是简化了这个测试用例。）

$(function () {
    functionOne();
});

function functionOne() {
    $(".foo:first").attr('id','bar');
    functionTwo();
}

function functionTwo() {
    console.log($('.foo:first').attr('id'));     // log the new id: 'bar'
}

fiddle

这有效，但它们是否独立运行？当我put a timeout on the first function时，没有任何记录（除非这是一个单独的错误）。

然后我尝试了这个：

$(function () {
    functionOne();
});

function functionOne() {
    $(".foo:first").attr('id', 'bar', function () {
            functionTwo();
        });
    }

function functionTwo() {
    console.log($('.foo:first').attr('id'));
}

fiddle

没有记录任何内容。如果.attr

，则回调可能不是参数

然后：

  $(function () {
      $.when.functionOne().done(function () {
          functionTwo();
      });
  });

  function functionOne() {
      $(".foo:first").attr('id', 'bar');
  }

  function functionTwo() {
      console.log($('.foo:first').attr('id'));
  }

fiddle

没有记录任何内容。我不认为.when和.done应该以这种方式使用。

那我应该如何筑巢呢？

Answer 1

第一个是前往这里的方式。

$(function () {
    functionOne();
});

function functionOne() {
    $(".foo:first").attr('id','bar');
    functionTwo();
}

function functionTwo() {
    console.log($('.foo:first').attr('id'));     // log the new id: 'bar'
}

.attr是同步的，因此按预期工作。

在setTimeout示例（http://jsfiddle.net/nathanbweb/t9pAR/2/）中，您错误地使用了setTimeout。

setTimeout(function functionOne() {}, 2000)

这不符合你的想法。这将创建一个函数，并在2秒后运行它。名称functionOne将仅仅存在于函数自己的范围内。

你可能想要这个：

$(function () { functionOne(); }); function functionOne() { setTimeout(function(){ $(".foo:first").attr('id','bar'); functionTwo(); }, 2000); } function functionTwo() { console.log($('.foo:first').attr('id')); // log the new id: 'bar' }

DEMO：http://jsfiddle.net/t9pAR/6/

Answer 2

为什么不尝试返回您想要调用的功能。

function functionOne() {
    $(".foo:first").attr('id','bar');
    return functionTwo();
}

http://jsfiddle.net/t9pAR/5/

nest函数按顺序运行

2 个答案: