☰

関数が完了するまで待ってから続行する適切な方法は? 質問する

tag-icon • tag-icon javascript jquery delay pausing-execution
関数が完了するまで待ってから続行する適切な方法は? 質問する

2 つの JS 関数があります。1 つはもう 1 つを呼び出します。呼び出し関数内でもう 1 つを呼び出し、その関数が終了するまで待ってから続行したいと思います。たとえば、疑似コードは次のようになります。

function firstFunction(){
    for(i=0;i<x;i++){
        // do something
    }
};

function secondFunction(){
    firstFunction()
    // now wait for firstFunction to finish...
    // do something else
};

私はこの解決策を思いつきましたが、これが賢明な方法であるかどうかはわかりません。

var isPaused = false;

function firstFunction(){
    isPaused = true;
    for(i=0;i<x;i++){
        // do something
    }
    isPaused = false;
};

function secondFunction(){
    firstFunction()
    function waitForIt(){
        if (isPaused) {
            setTimeout(function(){waitForIt()},100);
        } else {
            // go do that thing
        };
    }
};

それは合法ですか? もっとエレガントな処理方法はありますか? jQuery を使うといいかもしれません。

ベストアンサー1

このような非同期作業を処理する 1 つの方法は、コールバック関数を使用することです。例:

function firstFunction(_callback){
    // do some asynchronous work
    // and when the asynchronous stuff is complete
    _callback();    
}

function secondFunction(){
    // call first function and pass in a callback function which
    // first function runs when it has completed
    firstFunction(function() {
        console.log('huzzah, I\'m done!');
    });    
}

@Janaka Pushpakumara の提案に従って、矢印関数を使用して同じことを実現できるようになりました。例:

firstFunction(() => console.log('huzzah, I\'m done!'))

更新:かなり前にこの質問に回答しましたが、ぜひ更新したいと思っています。コールバックはまったく問題ありませんが、私の経験では、コールバックを使用すると、コードが読みにくくなり、保守しにくくなる傾向があります。ただし、進行中のイベントなどをパラメータとして渡す場合など、コールバックをまだ使用する状況もあります。この更新は、代替案を強調するためだけのものです。

また、元の質問では非同期について具体的に言及されていないため、混乱する人がいるかもしれないので、関数が同期している場合は、呼び出されたときにブロックされます。例:

doSomething()
// the function below will wait until doSomething completes if it is synchronous
doSomethingElse()

ただし、関数が非同期であることが示唆されている場合、現在私が非同期作業のすべてを処理する方法は、async/await を使用することです。例:

const secondFunction = async () => {
  const result = await firstFunction()
  // do something else here after firstFunction completes
}

私の意見では、async/await を使用すると、promise を直接使用するよりもコードがはるかに読みやすくなります (ほとんどの場合)。エラーのキャッチを処理する必要がある場合は、try/catch と一緒に使用します。詳細については、こちらをご覧ください。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function。

おすすめ記事