10

たとえば、このようなさまざまなスレッドを読みました。

しかし、次のことを達成する方法は本当に私を逃れます：

私は4つの機能を持っており、それらを次々と順番に実行したいと考えています。私の主張を理解するために、それらが間違った順序になっていることに注意してください。「1、2、3、4」を出力する結果が欲しい

function firstFunction(){
  // some very time consuming asynchronous code...
  console.log('1');
}
function thirdFunction(){
  // definitely dont wanna do this until secondFunction is finished
  console.log('3');
}
function secondFunction(){
  // waits for firstFunction to be completed
  console.log('2');
}
function fourthFunction(){
  // last function, not executed until the other 3 are done.
  console.log('4');
}

私はコールバックを理解しようとしましたが、迷子になっています:(

これを行う簡単な方法はありませんか？配列をループするような...

4

5 に答える 5

16

jQuery Deferredを使い始める絶好の機会です。

コールバックベースのソリューションとは別に、コードは読みやすく、柔軟で、保守性が高い

http://jsfiddle.net/zerkms/zJhph/

function firstFunction(){
  var d = $.Deferred();
  // some very time consuming asynchronous code...
  setTimeout(function() {
    console.log('1');
    d.resolve();
  }, 1000);
  return d.promise();
}
function thirdFunction(){
  var d = $.Deferred();
  // definitely dont wanna do this until secondFunction is finished
  setTimeout(function() {
    console.log('3');
    d.resolve();
  }, 1000);
  return d.promise();
}
function secondFunction(){
  var d = $.Deferred();
  setTimeout(function() {
    console.log('2');
    d.resolve();
  }, 1000);
  return d.promise();
}
function fourthFunction(){
  var d = $.Deferred();
  // last function, not executed until the other 3 are done.
  setTimeout(function() {
    console.log('4');
    d.resolve();
  }, 1000);
  return d.promise();
}

firstFunction().pipe(secondFunction).pipe(thirdFunction).pipe(fourthFunction);​

PS: 私が使用した非同期コードの例としてsetTimeout. d.resolve()主なことは、非同期部分の最後に、メソッドの連鎖を継続するために呼び出す必要があることです。

さらに読む: http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/

于 2012-09-05T03:33:53.953 に答える
1

最初の関数の実行が完了すると、関数の外で自分でそれを理解する必要があるのではなく、何を実行するかがわかるように、次のようなことを行うという考えです。

function firstFunction(callback){
  // some very time consuming asynchronous code...
  console.log('1');

  return callback(function(){
    alert("Second function finished.");
    return true;
  });
}
function secondFunction(callback){
  // waits for firstFunction to be completed
  console.log('2');

  return callback();
}

firstFunction(secondFunction);

また、見上げて.apply()ください.call()。

于 2012-09-05T03:32:01.897 に答える
1

コールバックを使用している場合、私の作業ソリューションは次のようになります。

    one(two);
    function one(callb){
        console.log('1');
        callb(three);
    }
    function four(){
        console.log('4');
    }
    function two(callb){
        console.log('2');
        callb(four);
    }
    function three(callb){
        console.log('3');
        callb();
    }

私はそれが恐ろしいと思います。2 ～ 3 個以上のシーケンスがある場合、どうすればこのようなものを追跡できますか? 身震い...

于 2012-09-05T03:43:17.737 に答える
0

deferredsしばらく経ちましたが、jquery のドキュメント、特にwhenコア API 関数について何かに気づきました。

$.when( $.ajax("test.aspx") ).then(function(ajaxArgs){ 
     alert(ajaxArgs[1]); /* ajaxArgs is [ "success", statusText, jqXHR ] */
});

http://jqapi.com/#p=jQuery.whenから取得したコード サンプル

于 2012-10-18T20:47:06.110 に答える
0

Promise、Sequence、Exception、Callback をいじって、それがどのように機能するかを理解し、最終的にこのコードを作成しました。

コールバックを使用して関数を呼び出し、結果をパラメーターとして別の関数に順番に送信すると、エラーが発生します。

function firstFunction(par) {
    return new Promise(function (resolve, reject) {
        console.log("start " + par);
        setTimeout(function (par) {
            console.log(par);
            resolve(par + 1);
        }, 1000, par);
    });
}
function secondFunction(par) {
    return new Promise(function (resolve, reject) {
        console.log("start " + par);
        setTimeout(function (par) {
            console.log(par);
            try{
                throw "Let's make an error...";
            }
            catch(err)
            {
                reject(err);
            }
            resolve(par + 1);
        }, 1000, par);
    })
}
function thirdFunction(par) {
    return new Promise(function (resolve, reject) {
        console.log("start " + par);
        setTimeout(function (par) {
            console.log(par);
            resolve(par + 1);
        }, 1000, par);
    });
}

function CatchError(error) {
    console.log("Exception: " + error);
}

//Break all chain in second function
function ChainBrake() {
    firstFunction(1)
    .then(secondFunction)
    .then(thirdFunction)
    .catch(CatchError);    
}

//Log error and continue executing chain
function ChainContinue() {
    firstFunction(1)
    .catch(CatchError)
    .then(secondFunction)
    .catch(CatchError)
    .then(thirdFunction)
    .catch(CatchError);
}
于 2016-10-03T18:18:22.533 に答える