Rxjs parallel subscribers

Question

I have the following code

x = new Rx.Subject()
z = new Rx.Subject()
loop = 900000000;

x
  .do(() => console.log('x start'))
  .do(() => { let i = loop; while(i--) continue })
  .subscribe(() => console.log('x end'))

z
  .do(() => console.log('z start'))
  .do(() => { let i = loop; while(i--) continue })
  .subscribe(() => console.log('z end'))

x.subscribe(z)

If I send a new event to x, this will be the output:

z start
z end
x start
x end

But I need the subscriptions to occur in parallel, and log it as

x start
z start
x end
z end

I don't mind about the order.

I've tried adding .subscribeOn(Rx.Scheduler.async) but the result is the same.

Check out an example here

Answer 1

Looks like you need .observeOn()

console.clear()
const x = new Rx.Subject();
const z = new Rx.Subject();
const loop = 900000000;

x
  .do(() => log('x start'))
  .do(() => { let i = loop; while(i--) continue })
  .observeOn(Rx.Scheduler.async)
  .subscribe(() => log('x end'));

z
  .do(() => log('z start'))
  .do(() => { let i = loop; while(i--) continue })
  .observeOn(Rx.Scheduler.async)
  .subscribe(() => log('z end'));

x.subscribe(z);

document
  .querySelector('#next')
  .addEventListener('click', () => x.next());

function log(data) {
  const logs = document.querySelector('#logs');
  const log = document.createElement('p');
  log.innerText = data;
  logs.appendChild(log);
}