blocks|key|2132342|text|最好的选择是使用一个承诺，它允许函数异步运行，然后在函数完成后触发一些函数。这里的好处是可以组合承诺，以便在完成某些工作之前等待它们中的任何一个或全部解决。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2132343|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises^0|A|2|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Your best bet would be to use a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises" rel="nofollow noreferrer">Promise</a> which allow functions to be run asynchronously and then trigger some function when they have completed. The benefit here is that promises can be composed so that you can wait on any or all of them to resolve before doing some work.

blocks|key|2132375|text|使用ES7s异步函数/等待：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2132376|​|2132377|async+function+main()+{

++++await+this.methodA();
++++if(true+%7C%7C+some_condition)+await+this.methodB();
++++await+this.methodC();

}

async+function+methodA()+{
++++console.log("doing+some+work+A");
++++await+timer(1000);
++++console.log("finished+A");
}

async+function+methodB()+{
++++console.log("doing+some+work+B");
++++await+timer(1000);
++++console.log("finished+B");
}

async+function+methodC()+{
++++console.log("should+be+the+last...");
}+

function+timer(time){
++return+new++Promise(function(res){
+++setTimeout(res,time);
++});
}
main();|code-block|syntax|javascript|2132378|2132379|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

Use ES7s async functions / await :

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>async function main() {

 await this.methodA();
 if(true || some_condition) await this.methodB();
 await this.methodC();

}

async function methodA() {
 console.log("doing some work A");
 await timer(1000);
 console.log("finished A");
}

async function methodB() {
 console.log("doing some work B");
 await timer(1000);
 console.log("finished B");
}

async function methodC() {
 console.log("should be the last...");
} 

function timer(time){
 return new Promise(function(res){
 setTimeout(res,time);
 });
}
main();</code></pre>
</div>
</div>

blocks|key|835091|text|虽然我同意您的规范似乎最好使用承诺来完成，但我想我会用可观察的方法给您一个答案，看看您是如何要求的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|835092|本质上，只需使用merge操作符，使methodA()和methodB()返回可观测值，并在它们都完成时调用methodC()：|offset|length|style|CODE|835093|var+some_condition+=+true
function+main()+{
++++let+test$+=+a()
++++if+(some_condition)+test$+=+test$.merge(b())
++++test$.subscribe(console.log,+null,+c)
}
function+a()+{
++++return+Rx.Observable.timer(500)
++++++++.mapTo('doing+some+work+A')
}
function+b()+{
++++return+Rx.Observable.timer(250)
++++++++.mapTo('doing+some+work+B')
}
function+c()+{
++++console.log('should+be+the+last...')
}
main()|code-block|syntax|javascript|835094|这个日志：|835095|doing+some+work+B
doing+some+work+A
should+be+the+last...|835096|entityMap^0|0|8|5|I|9|S|9|1I|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]|$D|W|E|X|F|G]|$D|Y|E|Z|F|G]|$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|R|$]]

While I agree that it seems like your spec could probably best be accomplished using promises, I figured I'd give you an answer using Observables, seeing how that's what you asked for.

Essentially, just use the <code>merge</code> operator, make <code>methodA()</code> and <code>methodB()</code> return observables, and call <code>methodC()</code> when they're all complete:

<pre><code>var some_condition = true
function main() {
 let test$ = a()
 if (some_condition) test$ = test$.merge(b())
 test$.subscribe(console.log, null, c)
}
function a() {
 return Rx.Observable.timer(500)
 .mapTo('doing some work A')
}
function b() {
 return Rx.Observable.timer(250)
 .mapTo('doing some work B')
}
function c() {
 console.log('should be the last...')
}
main()
</code></pre>

This logs:

<pre><code>doing some work B
doing some work A
should be the last...
</code></pre>

blocks|key|2132415|text|人们可能会忘记Observable.if()隐藏的宝石。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2132416|Observable.if(condition,+thenSource,+[elseSource])接受3个参数。第一个参数是布尔条件，第二个参数是在条件为真的情况下可以观察到的，而最后一个参数是其他源的数组，如果条件为false，则发送。|2132417|如果您想要完全观察到您的代码，可以这样做：|2132418|让所有的方法返回一个Observable+()|BOLD|2132419|const+methodA+=+()+=>+{
++++return+Observable
++++++++.timer(500)
++++++++.do(()+=>+{
++++++++++++//do+your+work+A+here
++++++++++++console.log('doing+some+work+A');
++++++++})
};

const+methodB+=+()+=>+{
++++return+Observable
++++++++.timer(250)
++++++++.do(()+=>+{
++++++++++++//do+your+work+B+here
++++++++++++console.log('doing+some+work+B');
++++++++})
};

const+methodC+=+()+=>+{
++++console.log("should+be+the+last...");
};|code-block|syntax|javascript|2132420|使用Observable.if()+解析流|2132421|现在，在您的主目录中，只需使用Observable.if()检查条件是否为真，并相应地发出可观察到的内容：|2132422|const+main+=+()+=>+{
++++let+some_condition+=+true;
++++Observable
++++++++.if(
++++++++++++//a+function+that+returns+true+or+false
++++++++++++()+=>+some_condition,
++++++++++++//Observable+to+emitif+condition+is+true
++++++++++++methodA().switchMap(()+=>+methodB()),
++++++++++++//Observable+to+emit+if+condition+is+false
++++++++++++methodA()
++++++++)
++++++++.subscribe(()+=>+{},+error+=>+{},+methodC)
};|2132423|这是您的工作JSBin。|2132424|关于Observable.if()的更多信息：https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/if.md|2132425|entityMap|0|LINK|mutability|MUTABLE|url|https://jsbin.com/degetuk/27/edit?js,console|1|https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/if.md^0|7|F|0|0|1E|0|0|A|A|A|A|0|0|2|F|I|3|2|F|0|0|1H|0|0|0|C|6|5|0|0|0|2Z|N|2C|1|0^^$0|@$1|2|3|4|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1H|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1I|8|@$9|1J|A|1K|B|L]|$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|M|3|N|5|O|7|1N|8|@]|D|@]|E|$P|Q]]|$1|R|3|S|5|6|7|1O|8|@$9|1P|A|1Q|B|L]|$9|1R|A|1S|B|L]|$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|T|3|U|5|6|7|1V|8|@$9|1W|A|1X|B|L]]|D|@]|E|$]]|$1|V|3|W|5|O|7|1Y|8|@]|D|@]|E|$P|Q]]|$1|X|3|Y|5|6|7|1Z|8|@$9|20|A|21|B|L]]|D|@$9|22|A|23|1|24]]|E|$]]|$1|Z|3|10|5|6|7|25|8|@$9|26|A|27|B|L]]|D|@$9|28|A|29|1|2A]]|E|$]]|$1|11|3|-4|5|6|7|2B|8|@]|D|@]|E|$]]]|12|$13|$5|14|15|16|E|$17|18]]|19|$5|14|15|16|E|$17|1A]]]]

People may forget the hidden gem of <code>Observable.if()</code>.

<code>Observable.if(condition, thenSource, [elseSource])</code> takes in 3 arguments. First argument is the boolean condition, second argument is an Observable to be emitted if condition is true, and the last one being an array of else source, that is to be emmitted if condition is false.

If you want to fully Observable-lised your code, you can do it this way:

1. Have all your methods return an <code>Observable</code>:

<pre><code>const methodA = () =&gt; {
 return Observable
 .timer(500)
 .do(() =&gt; {
 //do your work A here
 console.log('doing some work A');
 })
};

const methodB = () =&gt; {
 return Observable
 .timer(250)
 .do(() =&gt; {
 //do your work B here
 console.log('doing some work B');
 })
};

const methodC = () =&gt; {
 console.log("should be the last...");
};
</code></pre>

2. Use <code>Observable.if()</code> to resolve the streams

Now, in your main, simply use an Observable.if() to check if the condition is true, and emit the Observable accordingly:

<pre><code>const main = () =&gt; {
 let some_condition = true;
 Observable
 .if(
 //a function that returns true or false
 () =&gt; some_condition,
 //Observable to emitif condition is true
 methodA().switchMap(() =&gt; methodB()),
 //Observable to emit if condition is false
 methodA()
 )
 .subscribe(() =&gt; {}, error =&gt; {}, methodC)
};
</code></pre>

Here is the working <a href="https://jsbin.com/degetuk/27/edit?js,console" rel="nofollow noreferrer">JSBin</a> for you.

More on Observable.if(): <a href="https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/if.md" rel="nofollow noreferrer">https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/if.md</a>

blocks|key|835167|text|正如@CozyAzure所说，Observable.if()是你想要的。确保使用Observable.merge()和Observable.concat()。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|835168|const+methodA+=+()+=>+Observable.timer(500).mapTo("doing+some+work+A")
const+methodB+=+()+=>+Observable.timer(250).mapTo("doing+some+work+B")
const+methodC+=+()+=>+Observable.of("should+be+the+last...")

const+main+=+(some_condition)+=>
++Observable.if(
++++()+=>+some_condition,
++++methodA().merge(methodB()),
++++methodA()
++)
++.concat(methodC())
++.subscribe(console.log)

main(true)|code-block|syntax|javascript|835169|下面是小提琴中的示例|835170|如果你在履行承诺，你可能想推迟你的承诺的产生。例如,|835171|const+methodA+=+()+=>+Observable.timer(500).mapTo("doing+some+work+A")
const+methodB+=+()+=>+Observable.timer(250).mapTo("doing+some+work+B")
const+methodC+=+()+=>+Promise.resolve("should+be+the+last...")

Observable.merge(methodA(),+methodB())
++.concat(Observable.defer(()+=>+methodC())
++.subscribe(console.log)|835172|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/z8h6p7zp/^0|F|F|14|I|1N|J|0|0|3|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|M|3|N|5|6|7|1A|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|Q|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

As @CozyAzure said, <code>Observable.if()</code> is what you want. Make sure to make use of <code>Observable.merge()</code> and <code>Observable.concat()</code>. 

<pre><code>const methodA = () =&gt; Observable.timer(500).mapTo("doing some work A")
const methodB = () =&gt; Observable.timer(250).mapTo("doing some work B")
const methodC = () =&gt; Observable.of("should be the last...")

const main = (some_condition) =&gt;
 Observable.if(
 () =&gt; some_condition,
 methodA().merge(methodB()),
 methodA()
 )
 .concat(methodC())
 .subscribe(console.log)

main(true)
</code></pre>

Here's the example in <a href="https://jsfiddle.net/z8h6p7zp/" rel="nofollow noreferrer">jsfiddle</a>

If you're working with promises, you may want to defer the creation of your promise. For example,

<pre><code>const methodA = () =&gt; Observable.timer(500).mapTo("doing some work A")
const methodB = () =&gt; Observable.timer(250).mapTo("doing some work B")
const methodC = () =&gt; Promise.resolve("should be the last...")

Observable.merge(methodA(), methodB())
 .concat(Observable.defer(() =&gt; methodC())
 .subscribe(console.log)
</code></pre>

I want to run method A and B parallelly and once they both are done, I want to run method C.

How can I achieve this in javascript using Observable? 

<pre><code>main() {

 this.methodA();
 if(some_condition) this.methodB();
 this.methodC();

}

methodA() {
 setTimeout( () =&gt; { console.log("doing some work A"); }, 500);
}

methodB() {
 setTimeout( () =&gt; { console.log("doing some work B"); }, 250);
}

methodC() {
 console.log("should be the last...");
} 
</code></pre>

expected output (if some_condition is false):

doing some work A

should be the last...

expected output (if some_condition is true):

doing some work A

doing some work B

should be the last...

expected output (if some_condition is true):

doing some work B

doing some work A

should be the last...

Observable wait for a method to complete

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想并行运行方法A和B，一旦它们都完成了，我想运行方法C。如何使用可观察的javascript实现这一点？main() {    this.methodA();    if(some_condition) this.methodB();    this.methodC();}methodA() {    setTime...

问可观察的等待方法完成
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可观察的等待方法完成EN