Why bufferTime(5000, 10000) shows values that I created after 5000ms - rxjs

Question

Code:
const source = Rx.Observable.fromEvent(document.getElementById('click'), 'click')
const example = source.bufferTime(5000,10000);
const subscribe = example.subscribe(val => console.log('Start Buffer Every 1s:', val));
jsfiddle
I don't understand two things:
Why first value is returned after 5s not 10s
After 10s (as soon as I see empty array in console) I start clicking btn. I do it for 4 seconds, and after 10s there is still empty array. But if I start clicking after 5 seconds since the appearance of an empty array in the console, there is a proper result.
I thought that it will work like "Every 10 seconds, emit the click events from the next 5 seconds". But it doesn't.

Answer 1

bufferTime(bufferTimeSpan: number, bufferCreationInterval: number, ..)
// bufferTimeSpan: The amount of time to fill each buffer array.
// bufferCreationInterval: The interval at which to start new buffers.
bufferTimeSpan < bufferCreationInterval ⟹ gaps between buffer intervals
Example 1: bufferTimer(5000, 10000)
// 1. bufferCreationInterval = 10000
// open the buffer every 10 seconds, start with an open buffer
┌ 5 ┌ 10 ┌ 15 ┌ 20 ┌ 25 ┌ 30 ┌ 35 ┌ 40 ┌ 45 ┌ 50
bufferInterval: [----- -----[----- -----[----- -----[----- -----[----- -----[---
// 2. bufferTimeSpan = 5000
// close the buffer 5 seconds after it was opened
┌ 5 ┌ 10 ┌ 15 ┌ 20 ┌ 25 ┌ 30 ┌ 35 ┌ 40 ┌ 45 ┌ 50
bufferInterval: [~~~~~]-----[~~~~~]-----[~~~~~]-----[~~~~~]-----[~~~~~]-----[~~~
As soon as I see empty array in console I start clicking button, I do
it for 4 seconds.
┌┬┬┬ sounds like you click here, nothing is recorded
││││
bufferInterval: [~~~~~]-----[~~~~~]-----[~~~~~]-----[~~~~~]-----[~~~~~]-----[~~~
If I start clicking after 5 seconds since the appearance of an empty
array in the console, there is a proper result.
┌┬┬┬ sounds like you click here, values are buffered
││││
bufferInterval: [~~~~~]-----[~~~~~]-----[~~~~~]-----[~~~~~]-----[~~~~~]-----[~~~
bufferTimeSpan > bufferCreationInterval ⟹ overlapping buffer intervals
Example 2: bufferTimer(2000, 1000)
// 1. bufferCreationInterval = 1000
// open the buffer every 1 seconds, start with an open buffer
┌ 5 ┌ 10 ┌ 15 ┌ 20
bufferInterval: (- [- {- (- [- {- (- [- {- (- [- {- (- [- {- (- [- {- (- [- {- (-
// 2. bufferTimeSpan = 2000
// close the buffer 2 seconds after it was opened
┌ 5 ┌ 10 ┌ 15 ┌ 20
bufferInterval: (~ [~){~](~}[~){~](~}[~){~](~}[~){~](~}[~){~](~}[~){~](~}[~){~](~}
// split into multiple layers for better view
layer1: (~ ~) - (~ ~) - (~ ~) - (~ ~) - (~ ~) - (~ ~) - (~ ~) - (~
layer2: - [~ ~] - [~ ~] - [~ ~] - [~ ~] - [~ ~] - [~ ~] - [~ ~] -
layer3: - - {~ ~} - {~ ~} - {~ ~} - {~ ~} - {~ ~} - {~ ~} - {~ ~}