FRP with Bacon.js - how to simulate a pause button?

Question

I'm trying to get Functional Reactive Programming, and in particular FRP with Bacon.js , to my brain , and it's hard for me to find the right combinator to create a pause button.

var pauses = $('.pause').asEventStream('click');
var plays = $('.plays').asEventStream('click');
var ticks = Bacon.interval(500).whatGoesHere(???);

I want a pause signal to turn off the tick signal and the playback signal in order to restore it. Here is the marble diagram I want:

intervals   x x x x x x x x x x x x x x x x x x x x x x x
pauses              x                         x     x
plays                         x       x               x
ticks       x x x x           x x x x x x x x         x x

It’s fine if the time is off a bit, but this is the effect that I want at all.

Which combinator should I use to achieve this?

Answer 1

Combine plays and pause them as a property and filter the interval with it.

var pauses = $('.pause').asEventStream('click').map(false);
var plays = $('.plays').asEventStream('click').map(true);
var isTicking = pauses.merge(plays).toProperty(true);
var ticks = Bacon.interval(500).filter(isTicking);