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

Question

I'm trying to get my brain around Functional Reactive Programming, and specifically FRP with Bacon.js and am having trouble finding the right combinator for creating 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 cut off the ticks signal and a play signal to reinstate it. Here's the marble chart that 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 ok if the timing is a bit off but this is the effect I want in general.

What combinator should I be using to achieve this?

Answer 1

Merge plays and pauses as a property and filter the interval stream 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);