How can I use RxJS to buffer function calls until another async function has resolved?

Here is a simple example of what I'd like to accomplish

```js
function asyncFunc(time) {
  setTimeout(() => {
      console.log('asyncFunc has resolved');
   }, time);
}

function funcToBuffer(time) {
  setTimeout(() => {
    console.log(time);
  }, time);
}

asyncFunc(3000);

funcToBuffer(1000);
funcToBuffer(2000);
funcToBuffer(4000);
funcToBuffer(5000);

asyncFunc(8000);

funcToBuffer(6000);
funcToBuffer(7000);
```

At the moment this code will print:

```
1000
2000
asyncFunc has resolved
4000
5000
6000
7000
asyncFunc has resolved

```

What I want is for this to print:

```
asyncFunc has resolved
1000
2000    
4000
5000
asyncFunc has resolved
6000
7000

```

In essence, I want some kind of control flow that allows me to call funcToBuffer whenever I feel like, but under the hood, I want it to hold on executing whenever asyncFunc is executing and waiting to be resolved. Once asyncFunc has resolved, funcToBuffer calls should no longer be buffered and be executed right away.

I have tried playing with the buffer operator but I wasn't able to achieve the desired outcome.