ZipWithLatestForm *Wanted Operator* or Workaround

Lets consider following streams:

Stream1: 1  2  3  4  5  6  7  8  9                

Stream2: abc  d       fg   h

Output I would like to get with combining these streams:

[1, a]

[2, b]

[3, c]

[4, d]

[5, d]

[6, f]

[7, g]

[8, h]

[9, h]

Sample Code Idea: StackBlitz Editor Link

const input$ = fromEvent(document, 'keydown')

  .pipe(

    map((event: KeyboardEvent) => event.keyCode)

  );

const source$ = interval(500).pipe(s$ => zip(s$, input$))

source$.subscribe(x => console.log(x));

So this is something like operators zip() and/or withLatestForm(), but I can't come up with solution

Main idea is that I have interval of 500ms and on every tick I want to zip it with Keyboard Input Observable, which works how I would like, but as long I am not emitting Keyboard Input Observable everything stops. I want to keep emitting interval ticks, but if keyboard events stop then take the latest value

edited Nov 21 '18 at 5:52

asked Nov 20 '18 at 20:09

Goga Koreli

467213

Does the output at the beginning of your question actually represent your use case? I'm not at all sure that it does. In which case, there are two questions within your question.

– cartant
Nov 20 '18 at 21:36

I guess I didn't give the best description. Yes it does actually represent my case. Whenever keyboard inputs are incoming faster than interval ticks I want them to be somewhat saved in memory so that when later ticks arrive they are matched together, but whenever there are no more keyboard inputs I want latest keyboard input to be matched with the tick

– Goga Koreli
Nov 21 '18 at 5:48

Please have look at streams again, I edited them to better demonstrate my use case

– Goga Koreli
Nov 21 '18 at 5:52

I presume that you would like to have a interval to keep going and taking the latest value from what you have type (keyboard event). Please see below is the fork from your Stackblitz and I modified that to try to answer your question.

– dK-
Nov 21 '18 at 23:17

My post was deleted by moderator due to lack of information and not solving problems. However, if you are still interested - here is the link. The modification is minimal, the operator you need is combineLatest

– dK-
Nov 22 '18 at 0:47

add a comment |

Lets consider following streams:

Stream1: 1  2  3  4  5  6  7  8  9                

Stream2: abc  d       fg   h

Output I would like to get with combining these streams:

[1, a]

[2, b]

[3, c]

[4, d]

[5, d]

[6, f]

[7, g]

[8, h]

[9, h]

Sample Code Idea: StackBlitz Editor Link

const input$ = fromEvent(document, 'keydown')

  .pipe(

    map((event: KeyboardEvent) => event.keyCode)

  );

const source$ = interval(500).pipe(s$ => zip(s$, input$))

source$.subscribe(x => console.log(x));

So this is something like operators zip() and/or withLatestForm(), but I can't come up with solution

Main idea is that I have interval of 500ms and on every tick I want to zip it with Keyboard Input Observable, which works how I would like, but as long I am not emitting Keyboard Input Observable everything stops. I want to keep emitting interval ticks, but if keyboard events stop then take the latest value

edited Nov 21 '18 at 5:52

asked Nov 20 '18 at 20:09

Goga Koreli

467213

Does the output at the beginning of your question actually represent your use case? I'm not at all sure that it does. In which case, there are two questions within your question.

– cartant
Nov 20 '18 at 21:36

I guess I didn't give the best description. Yes it does actually represent my case. Whenever keyboard inputs are incoming faster than interval ticks I want them to be somewhat saved in memory so that when later ticks arrive they are matched together, but whenever there are no more keyboard inputs I want latest keyboard input to be matched with the tick

– Goga Koreli
Nov 21 '18 at 5:48

Please have look at streams again, I edited them to better demonstrate my use case

– Goga Koreli
Nov 21 '18 at 5:52

I presume that you would like to have a interval to keep going and taking the latest value from what you have type (keyboard event). Please see below is the fork from your Stackblitz and I modified that to try to answer your question.

– dK-
Nov 21 '18 at 23:17

My post was deleted by moderator due to lack of information and not solving problems. However, if you are still interested - here is the link. The modification is minimal, the operator you need is combineLatest

– dK-
Nov 22 '18 at 0:47

add a comment |

Lets consider following streams:

Stream1: 1  2  3  4  5  6  7  8  9                

Stream2: abc  d       fg   h

Output I would like to get with combining these streams:

[1, a]

[2, b]

[3, c]

[4, d]

[5, d]

[6, f]

[7, g]

[8, h]

[9, h]

Sample Code Idea: StackBlitz Editor Link

const input$ = fromEvent(document, 'keydown')

  .pipe(

    map((event: KeyboardEvent) => event.keyCode)

  );

const source$ = interval(500).pipe(s$ => zip(s$, input$))

source$.subscribe(x => console.log(x));

So this is something like operators zip() and/or withLatestForm(), but I can't come up with solution

Main idea is that I have interval of 500ms and on every tick I want to zip it with Keyboard Input Observable, which works how I would like, but as long I am not emitting Keyboard Input Observable everything stops. I want to keep emitting interval ticks, but if keyboard events stop then take the latest value

edited Nov 21 '18 at 5:52

asked Nov 20 '18 at 20:09

Goga Koreli

467213

Lets consider following streams:

Stream1: 1  2  3  4  5  6  7  8  9                

Stream2: abc  d       fg   h

Output I would like to get with combining these streams:

[1, a]

[2, b]

[3, c]

[4, d]

[5, d]

[6, f]

[7, g]

[8, h]

[9, h]

Sample Code Idea: StackBlitz Editor Link

const input$ = fromEvent(document, 'keydown')

  .pipe(

    map((event: KeyboardEvent) => event.keyCode)

  );

const source$ = interval(500).pipe(s$ => zip(s$, input$))

source$.subscribe(x => console.log(x));

So this is something like operators zip() and/or withLatestForm(), but I can't come up with solution

Main idea is that I have interval of 500ms and on every tick I want to zip it with Keyboard Input Observable, which works how I would like, but as long I am not emitting Keyboard Input Observable everything stops. I want to keep emitting interval ticks, but if keyboard events stop then take the latest value

javascript typescript rxjs reactive-programming rxjs6

edited Nov 21 '18 at 5:52

asked Nov 20 '18 at 20:09

Goga Koreli

467213

edited Nov 21 '18 at 5:52

asked Nov 20 '18 at 20:09

Goga Koreli

467213

edited Nov 21 '18 at 5:52

asked Nov 20 '18 at 20:09

Goga Koreli

467213

asked Nov 20 '18 at 20:09

Goga Koreli

467213

asked Nov 20 '18 at 20:09

Goga Koreli

467213

Does the output at the beginning of your question actually represent your use case? I'm not at all sure that it does. In which case, there are two questions within your question.

– cartant
Nov 20 '18 at 21:36

I guess I didn't give the best description. Yes it does actually represent my case. Whenever keyboard inputs are incoming faster than interval ticks I want them to be somewhat saved in memory so that when later ticks arrive they are matched together, but whenever there are no more keyboard inputs I want latest keyboard input to be matched with the tick

– Goga Koreli
Nov 21 '18 at 5:48

Please have look at streams again, I edited them to better demonstrate my use case

– Goga Koreli
Nov 21 '18 at 5:52

I presume that you would like to have a interval to keep going and taking the latest value from what you have type (keyboard event). Please see below is the fork from your Stackblitz and I modified that to try to answer your question.

– dK-
Nov 21 '18 at 23:17

My post was deleted by moderator due to lack of information and not solving problems. However, if you are still interested - here is the link. The modification is minimal, the operator you need is combineLatest

– dK-
Nov 22 '18 at 0:47

add a comment |

Does the output at the beginning of your question actually represent your use case? I'm not at all sure that it does. In which case, there are two questions within your question.

– cartant
Nov 20 '18 at 21:36

I guess I didn't give the best description. Yes it does actually represent my case. Whenever keyboard inputs are incoming faster than interval ticks I want them to be somewhat saved in memory so that when later ticks arrive they are matched together, but whenever there are no more keyboard inputs I want latest keyboard input to be matched with the tick

– Goga Koreli
Nov 21 '18 at 5:48

Please have look at streams again, I edited them to better demonstrate my use case

– Goga Koreli
Nov 21 '18 at 5:52

I presume that you would like to have a interval to keep going and taking the latest value from what you have type (keyboard event). Please see below is the fork from your Stackblitz and I modified that to try to answer your question.

– dK-
Nov 21 '18 at 23:17

My post was deleted by moderator due to lack of information and not solving problems. However, if you are still interested - here is the link. The modification is minimal, the operator you need is combineLatest

– dK-
Nov 22 '18 at 0:47

Does the output at the beginning of your question actually represent your use case? I'm not at all sure that it does. In which case, there are two questions within your question.

– cartant
Nov 20 '18 at 21:36

I guess I didn't give the best description. Yes it does actually represent my case. Whenever keyboard inputs are incoming faster than interval ticks I want them to be somewhat saved in memory so that when later ticks arrive they are matched together, but whenever there are no more keyboard inputs I want latest keyboard input to be matched with the tick

– Goga Koreli
Nov 21 '18 at 5:48

Please have look at streams again, I edited them to better demonstrate my use case

– Goga Koreli
Nov 21 '18 at 5:52

I presume that you would like to have a interval to keep going and taking the latest value from what you have type (keyboard event). Please see below is the fork from your Stackblitz and I modified that to try to answer your question.

– dK-
Nov 21 '18 at 23:17

My post was deleted by moderator due to lack of information and not solving problems. However, if you are still interested - here is the link. The modification is minimal, the operator you need is combineLatest

– dK-
Nov 22 '18 at 0:47

add a comment |

3 Answers
3

active

oldest

votes

You can just use withLatestFrom

import { of, fromEvent, interval } from 'rxjs'; 

import { map, withLatestFrom } from 'rxjs/operators';



const input$ = fromEvent(document, 'keydown').pipe( map((event: KeyboardEvent) => event.keyCode));

const timer$ = interval(1000);

const source$ = timer$.pipe(withLatestFrom(input$));



source$.subscribe(x => console.log(x));

Try out this live demo at stackblitz -> https://stackblitz.com/edit/rxjs-bmx7hg

As soon as you focus the page and press some key, the stream will start and you will get an emitted value on every tick, no matter if you clicked a button since the last tick.

edited Nov 20 '18 at 21:03

answered Nov 20 '18 at 20:58

Bene

35529

Please have look at streams again, I edited them to better demonstrate my use case. As for my use case please consider that I would like to have more like zip functionality, because using withLatestFrom() will emit whenever any of the (source1 or source2) observables emit. And I would get many more emitted items at final subscription than I would like

– Goga Koreli
Nov 21 '18 at 5:58

No, by using withLatestFrom, it will only emit if the source stream (in my example timer$) emits. You can also check this in my demo - just press keyboard buttons furiously - there will ever only be one emitted value every second

– Bene
Nov 21 '18 at 8:30

Yes I agree with you but using withLatesForm() will give me [1, a] and [2, c]. [2,b] would be skipped.

– Goga Koreli
Nov 27 '18 at 7:45

add a comment |

I don't know rxjs well enough to say whether there's a builtin that already does this, but you should be able to handle it with an explicit queue:

import { of, fromEvent, interval } from 'rxjs'; 

import { map, withLatestFrom } from 'rxjs/operators';



const queue = ;

const input$ = fromEvent(document, 'keydown').pipe(map((event: KeyboardEvent) => {

    queue.push(event.keyCode);

    return queue;

});

const timer$ = interval(1000);

const source$ = timer$.pipe(withLatestFrom(input$), map(([tick, queue]) => {

    if (queue.length > 1)

        return queue.shift();

    else

        return queue[0];

}));



source$.subscribe(console.log);

answered Nov 21 '18 at 21:52

Bergi

368k58549876

Thanks I guess that would be working since my case is exactly queue functionality. I wanted some kind of rxjs operator

– Goga Koreli
Nov 27 '18 at 7:56

add a comment |

After some time of thinking on the solution I came up with solution like so, StackBlitz Edit Link:

const interval$ = interval(500).pipe(share());

const input$ = fromEvent(document, 'keydown')

  .pipe(

    map((event: KeyboardEvent) => event.keyCode),

    concatMap(key => interval$.pipe(map(tick => key), take(1))),

  );



const source$ = interval$.pipe(withLatestFrom(input$))

source$.subscribe(x => console.log(x));

I delayed input$ with the help of interval$ and concatMap (notice take(1) as well).

ConcatMap helped me to prolong input$ events and wait for interval event to fire its own event. Using withLatestForm helped me to match ticks with their own input$ values.

answered Nov 27 '18 at 7:54

Goga Koreli

467213

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400784%2fzipwithlatestform-wanted-operator-or-workaround%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

You can just use withLatestFrom

import { of, fromEvent, interval } from 'rxjs'; 

import { map, withLatestFrom } from 'rxjs/operators';



const input$ = fromEvent(document, 'keydown').pipe( map((event: KeyboardEvent) => event.keyCode));

const timer$ = interval(1000);

const source$ = timer$.pipe(withLatestFrom(input$));



source$.subscribe(x => console.log(x));

Try out this live demo at stackblitz -> https://stackblitz.com/edit/rxjs-bmx7hg

As soon as you focus the page and press some key, the stream will start and you will get an emitted value on every tick, no matter if you clicked a button since the last tick.

edited Nov 20 '18 at 21:03

answered Nov 20 '18 at 20:58

Bene

35529

Please have look at streams again, I edited them to better demonstrate my use case. As for my use case please consider that I would like to have more like zip functionality, because using withLatestFrom() will emit whenever any of the (source1 or source2) observables emit. And I would get many more emitted items at final subscription than I would like

– Goga Koreli
Nov 21 '18 at 5:58

No, by using withLatestFrom, it will only emit if the source stream (in my example timer$) emits. You can also check this in my demo - just press keyboard buttons furiously - there will ever only be one emitted value every second

– Bene
Nov 21 '18 at 8:30

Yes I agree with you but using withLatesForm() will give me [1, a] and [2, c]. [2,b] would be skipped.

– Goga Koreli
Nov 27 '18 at 7:45

add a comment |

You can just use withLatestFrom

import { of, fromEvent, interval } from 'rxjs'; 

import { map, withLatestFrom } from 'rxjs/operators';



const input$ = fromEvent(document, 'keydown').pipe( map((event: KeyboardEvent) => event.keyCode));

const timer$ = interval(1000);

const source$ = timer$.pipe(withLatestFrom(input$));



source$.subscribe(x => console.log(x));

Try out this live demo at stackblitz -> https://stackblitz.com/edit/rxjs-bmx7hg

As soon as you focus the page and press some key, the stream will start and you will get an emitted value on every tick, no matter if you clicked a button since the last tick.

edited Nov 20 '18 at 21:03

answered Nov 20 '18 at 20:58

Bene

35529

Please have look at streams again, I edited them to better demonstrate my use case. As for my use case please consider that I would like to have more like zip functionality, because using withLatestFrom() will emit whenever any of the (source1 or source2) observables emit. And I would get many more emitted items at final subscription than I would like

– Goga Koreli
Nov 21 '18 at 5:58

No, by using withLatestFrom, it will only emit if the source stream (in my example timer$) emits. You can also check this in my demo - just press keyboard buttons furiously - there will ever only be one emitted value every second

– Bene
Nov 21 '18 at 8:30

Yes I agree with you but using withLatesForm() will give me [1, a] and [2, c]. [2,b] would be skipped.

– Goga Koreli
Nov 27 '18 at 7:45

add a comment |

You can just use withLatestFrom

import { of, fromEvent, interval } from 'rxjs'; 

import { map, withLatestFrom } from 'rxjs/operators';



const input$ = fromEvent(document, 'keydown').pipe( map((event: KeyboardEvent) => event.keyCode));

const timer$ = interval(1000);

const source$ = timer$.pipe(withLatestFrom(input$));



source$.subscribe(x => console.log(x));

Try out this live demo at stackblitz -> https://stackblitz.com/edit/rxjs-bmx7hg

As soon as you focus the page and press some key, the stream will start and you will get an emitted value on every tick, no matter if you clicked a button since the last tick.

edited Nov 20 '18 at 21:03

answered Nov 20 '18 at 20:58

Bene

35529

You can just use withLatestFrom

import { of, fromEvent, interval } from 'rxjs'; 

import { map, withLatestFrom } from 'rxjs/operators';



const input$ = fromEvent(document, 'keydown').pipe( map((event: KeyboardEvent) => event.keyCode));

const timer$ = interval(1000);

const source$ = timer$.pipe(withLatestFrom(input$));



source$.subscribe(x => console.log(x));

Try out this live demo at stackblitz -> https://stackblitz.com/edit/rxjs-bmx7hg

As soon as you focus the page and press some key, the stream will start and you will get an emitted value on every tick, no matter if you clicked a button since the last tick.

edited Nov 20 '18 at 21:03

answered Nov 20 '18 at 20:58

Bene

35529

edited Nov 20 '18 at 21:03

answered Nov 20 '18 at 20:58

Bene

35529

answered Nov 20 '18 at 20:58

Bene

35529

answered Nov 20 '18 at 20:58

Bene

35529

Please have look at streams again, I edited them to better demonstrate my use case. As for my use case please consider that I would like to have more like zip functionality, because using withLatestFrom() will emit whenever any of the (source1 or source2) observables emit. And I would get many more emitted items at final subscription than I would like

– Goga Koreli
Nov 21 '18 at 5:58

No, by using withLatestFrom, it will only emit if the source stream (in my example timer$) emits. You can also check this in my demo - just press keyboard buttons furiously - there will ever only be one emitted value every second

– Bene
Nov 21 '18 at 8:30

Yes I agree with you but using withLatesForm() will give me [1, a] and [2, c]. [2,b] would be skipped.

– Goga Koreli
Nov 27 '18 at 7:45

add a comment |

Please have look at streams again, I edited them to better demonstrate my use case. As for my use case please consider that I would like to have more like zip functionality, because using withLatestFrom() will emit whenever any of the (source1 or source2) observables emit. And I would get many more emitted items at final subscription than I would like

– Goga Koreli
Nov 21 '18 at 5:58

No, by using withLatestFrom, it will only emit if the source stream (in my example timer$) emits. You can also check this in my demo - just press keyboard buttons furiously - there will ever only be one emitted value every second

– Bene
Nov 21 '18 at 8:30

Yes I agree with you but using withLatesForm() will give me [1, a] and [2, c]. [2,b] would be skipped.

– Goga Koreli
Nov 27 '18 at 7:45

Please have look at streams again, I edited them to better demonstrate my use case. As for my use case please consider that I would like to have more like zip functionality, because using withLatestFrom() will emit whenever any of the (source1 or source2) observables emit. And I would get many more emitted items at final subscription than I would like

– Goga Koreli
Nov 21 '18 at 5:58

No, by using withLatestFrom, it will only emit if the source stream (in my example timer$) emits. You can also check this in my demo - just press keyboard buttons furiously - there will ever only be one emitted value every second

– Bene
Nov 21 '18 at 8:30

Yes I agree with you but using withLatesForm() will give me [1, a] and [2, c]. [2,b] would be skipped.

– Goga Koreli
Nov 27 '18 at 7:45

add a comment |

I don't know rxjs well enough to say whether there's a builtin that already does this, but you should be able to handle it with an explicit queue:

import { of, fromEvent, interval } from 'rxjs'; 

import { map, withLatestFrom } from 'rxjs/operators';



const queue = ;

const input$ = fromEvent(document, 'keydown').pipe(map((event: KeyboardEvent) => {

    queue.push(event.keyCode);

    return queue;

});

const timer$ = interval(1000);

const source$ = timer$.pipe(withLatestFrom(input$), map(([tick, queue]) => {

    if (queue.length > 1)

        return queue.shift();

    else

        return queue[0];

}));



source$.subscribe(console.log);

answered Nov 21 '18 at 21:52

Bergi

368k58549876

Thanks I guess that would be working since my case is exactly queue functionality. I wanted some kind of rxjs operator

– Goga Koreli
Nov 27 '18 at 7:56

add a comment |

I don't know rxjs well enough to say whether there's a builtin that already does this, but you should be able to handle it with an explicit queue:

import { of, fromEvent, interval } from 'rxjs'; 

import { map, withLatestFrom } from 'rxjs/operators';



const queue = ;

const input$ = fromEvent(document, 'keydown').pipe(map((event: KeyboardEvent) => {

    queue.push(event.keyCode);

    return queue;

});

const timer$ = interval(1000);

const source$ = timer$.pipe(withLatestFrom(input$), map(([tick, queue]) => {

    if (queue.length > 1)

        return queue.shift();

    else

        return queue[0];

}));



source$.subscribe(console.log);

answered Nov 21 '18 at 21:52

Bergi

368k58549876

Thanks I guess that would be working since my case is exactly queue functionality. I wanted some kind of rxjs operator

– Goga Koreli
Nov 27 '18 at 7:56

add a comment |

I don't know rxjs well enough to say whether there's a builtin that already does this, but you should be able to handle it with an explicit queue:

import { of, fromEvent, interval } from 'rxjs'; 

import { map, withLatestFrom } from 'rxjs/operators';



const queue = ;

const input$ = fromEvent(document, 'keydown').pipe(map((event: KeyboardEvent) => {

    queue.push(event.keyCode);

    return queue;

});

const timer$ = interval(1000);

const source$ = timer$.pipe(withLatestFrom(input$), map(([tick, queue]) => {

    if (queue.length > 1)

        return queue.shift();

    else

        return queue[0];

}));



source$.subscribe(console.log);

answered Nov 21 '18 at 21:52

Bergi

368k58549876

I don't know rxjs well enough to say whether there's a builtin that already does this, but you should be able to handle it with an explicit queue:

import { of, fromEvent, interval } from 'rxjs'; 

import { map, withLatestFrom } from 'rxjs/operators';



const queue = ;

const input$ = fromEvent(document, 'keydown').pipe(map((event: KeyboardEvent) => {

    queue.push(event.keyCode);

    return queue;

});

const timer$ = interval(1000);

const source$ = timer$.pipe(withLatestFrom(input$), map(([tick, queue]) => {

    if (queue.length > 1)

        return queue.shift();

    else

        return queue[0];

}));



source$.subscribe(console.log);

answered Nov 21 '18 at 21:52

Bergi

368k58549876

answered Nov 21 '18 at 21:52

Bergi

368k58549876

answered Nov 21 '18 at 21:52

Bergi

368k58549876

answered Nov 21 '18 at 21:52

Bergi

368k58549876

Thanks I guess that would be working since my case is exactly queue functionality. I wanted some kind of rxjs operator

– Goga Koreli
Nov 27 '18 at 7:56

add a comment |

Thanks I guess that would be working since my case is exactly queue functionality. I wanted some kind of rxjs operator

– Goga Koreli
Nov 27 '18 at 7:56

Thanks I guess that would be working since my case is exactly queue functionality. I wanted some kind of rxjs operator

– Goga Koreli
Nov 27 '18 at 7:56

add a comment |

After some time of thinking on the solution I came up with solution like so, StackBlitz Edit Link:

const interval$ = interval(500).pipe(share());

const input$ = fromEvent(document, 'keydown')

  .pipe(

    map((event: KeyboardEvent) => event.keyCode),

    concatMap(key => interval$.pipe(map(tick => key), take(1))),

  );



const source$ = interval$.pipe(withLatestFrom(input$))

source$.subscribe(x => console.log(x));

I delayed input$ with the help of interval$ and concatMap (notice take(1) as well).

ConcatMap helped me to prolong input$ events and wait for interval event to fire its own event. Using withLatestForm helped me to match ticks with their own input$ values.

answered Nov 27 '18 at 7:54

Goga Koreli

467213

add a comment |

After some time of thinking on the solution I came up with solution like so, StackBlitz Edit Link:

const interval$ = interval(500).pipe(share());

const input$ = fromEvent(document, 'keydown')

  .pipe(

    map((event: KeyboardEvent) => event.keyCode),

    concatMap(key => interval$.pipe(map(tick => key), take(1))),

  );



const source$ = interval$.pipe(withLatestFrom(input$))

source$.subscribe(x => console.log(x));

I delayed input$ with the help of interval$ and concatMap (notice take(1) as well).

ConcatMap helped me to prolong input$ events and wait for interval event to fire its own event. Using withLatestForm helped me to match ticks with their own input$ values.

answered Nov 27 '18 at 7:54

Goga Koreli

467213

add a comment |

After some time of thinking on the solution I came up with solution like so, StackBlitz Edit Link:

const interval$ = interval(500).pipe(share());

const input$ = fromEvent(document, 'keydown')

  .pipe(

    map((event: KeyboardEvent) => event.keyCode),

    concatMap(key => interval$.pipe(map(tick => key), take(1))),

  );



const source$ = interval$.pipe(withLatestFrom(input$))

source$.subscribe(x => console.log(x));

I delayed input$ with the help of interval$ and concatMap (notice take(1) as well).

ConcatMap helped me to prolong input$ events and wait for interval event to fire its own event. Using withLatestForm helped me to match ticks with their own input$ values.

answered Nov 27 '18 at 7:54

Goga Koreli

467213

After some time of thinking on the solution I came up with solution like so, StackBlitz Edit Link:

const interval$ = interval(500).pipe(share());

const input$ = fromEvent(document, 'keydown')

  .pipe(

    map((event: KeyboardEvent) => event.keyCode),

    concatMap(key => interval$.pipe(map(tick => key), take(1))),

  );



const source$ = interval$.pipe(withLatestFrom(input$))

source$.subscribe(x => console.log(x));

I delayed input$ with the help of interval$ and concatMap (notice take(1) as well).

ConcatMap helped me to prolong input$ events and wait for interval event to fire its own event. Using withLatestForm helped me to match ticks with their own input$ values.

answered Nov 27 '18 at 7:54

Goga Koreli

467213

answered Nov 27 '18 at 7:54

Goga Koreli

467213

answered Nov 27 '18 at 7:54

Goga Koreli

467213

answered Nov 27 '18 at 7:54

Goga Koreli

467213

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu