How delayWhen works in observables?

Question

I am bit confused with Rxjs. I am trying to implement timer counter using observable.

Below is link

https://jsfiddle.net/vpx0y8fu/375/

Consider below code snippet i have message as source which emits value after 1 sec. I have used delayWhen operator which delays each value emitted by source. But when i am subscribing the delayed observable it is having only initial delay i.e after first value emission each value is emitted at 1 sec interval.

//emit value every second
   const message = Rx.Observable.interval(1000);
   //emit value after five seconds
  //after 5 seconds, start emitting delayed values
  const delayWhenExample = message.delayWhen(() => 
  Rx.Observable.interval(4000));
  //log values, delayed for 5 seconds
  //ex. output: 5s....1...2...3
  const subscribe = delayWhenExample.subscribe(val => 
  console.log(val));

But when i use below code snippet

//emit value on click
const message1 = Rx.Observable.fromEvent(document, 'click');
//emit value after five seconds
//after 5 seconds, start emitting delayed values
const delayWhenExample1 = message1.delayWhen(() => Rx.Observable.interval(4000));
//log values, delayed for 5 seconds
//ex. output: 5s....1...2...3
const subscribe1 = delayWhenExample1.subscribe(val => console.log(val));

Each click is delayed by 4secs.

Could anyone point out what is the difference that i am unable to understand?

In each of source observables from above examples when value emits it should get delayed by 4 secs but it is not happening in first example whereas second works as expected.

Please suggest me a implementation for timer using above implementation as i don't want to do time calculations.