Combination of rxjs and setTimeout creates unexpected runtime behaviour-CodePudding

I have some problems to understand the difference between the following two snippets.

const a = Observable.create(
  o => {
    setTimeout(
      ()=>{ 
        console.log("now 3");
        o.next(3);
        setTimeout(()=>{ console.log("and now 5"); o.next(5)}, 1500);}
      , 1500);
   
  }
);
const a2 = Observable.create(
  o => {
    setTimeout(
      ()=>{ 
        console.log("here is 4");
        o.next(4);
        setTimeout(o.next(6), 1500);}
      , 1500);
  }
);

https://stackblitz.com/edit/rxjs-byqgnh?devtoolsheight=60

I removed in the second block only the console log.

The first block works like expected: first number is emitted after timeout, second number too.

The second block emitts both numbers simultanious. Can anybody explain the difference?

CodePudding user response：

When you do

setTimeout(()=>{ console.log("and now 5"); o.next(5)}, 1500);

you are passing ()=>{ console.log("and now 5"); o.next(5)} as a callback function to setTimeout API, which will be probably trigger after 1.5sec. And Its fine since this is what you wanted to happen.

But when you do

setTimeout(o.next(6), 1500)

You are executing o.next(6) and emitting value right before you are passing it as a callback function to setTimeout, but when you see It's not a function signature, what o.next(6) generates is a undefined value which will be pass as a callback and chances you will get Callback must be a function error.

So, if you want o.next(6) to be passed as a callback function to setTimeout and emit value after 1.5 sec then you can pass it as

setTimeout(() => o.next(6), 1500)

or as

setTimeout(function(){
   o.next(6);
}, 1500)

CodePudding user response：

setTimeout takes a callback

The following with generate a runtime error

setTimeout(o.next(6), 1500);

TypeError [ERR_INVALID_CALLBACK]: Callback must be a function.

as the return type of n.next is undefined. Observables, however, catch errors and emit them as error events for you. So you don't see that in your example.

To fix this, you could give setTimeout a callback function instead.

setTimeout(() => o.next(6), 1500);