jquery - 嵌套函数按顺序运行

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'
}

演示:http://jsfiddle.net/t9pAR/6/