How to use the xstream/extra/delay function in xstream

const reducers$ = xs.merge(
        xs.of(state => merge(LENSED_STATE, state)),
        postR$,
        postLoadingR$,
        commentFocusR$,
        votingR$,
        voteFailR$,
        voteFailDismissR$,
        replyToR$,

        // Incoming vote effects.
        actions.vote$
            .filter(res => 'action' in res)
            .compose(sampleCombine(actions.voting$))
            .compose(delay(500))
            .map(([status, vote]) => state => {
                const value = status.action == 'create' ? 1 : -1;

                return update(state, {
                    voting: false,
                    comments: {
                        map: {
                            [vote.id]: {
                                votes: {
                                    up:
                                        state.own.comments.map[vote.id].votes
                                            .up +
                                        (vote.intent == 'up' ? value : 0),
                                    down:
                                        state.own.comments.map[vote.id].votes
                                            .down +

it('should merge multiple objects of streams together', (done) => {
      const a = {a: xs.of(1)}
      const b = {a: xs.of(2).compose(delay(10))}

      const expected = [1, 2]

      mergeFlatten('a', [a, b])
        .addListener({
          next: x => {
            assert(x === expected.shift())
          },
          error: done,
          complete: () => {
            assert(expected.length === 0)
            done()
          }
        })
    })

state.measurements.matrixBHeight * 0.5;
      const yLastComb = yLift -
        padding -
        styles.matrixBracketWidth * 2 -
        state.measurements.rowHeight * (state.step - 2);
      const yOutside = yLastComb -
        state.measurements.rowHeight -
        padding * 4;
      return concat(
        tween({ from: yLastComb, to: yOutside, duration, ease }).map(y => `
          translateX(${-xMove}px)
          translateY(${-y}px)
          rotateZ(-90deg)
        `),
        xs.of('translateX(0px) translateY(0px) rotateZ(0deg)')
          .compose(delay(timeToReset * 0.9)),
      );
    })
    .flatten();

s1.step === s2.step && s1.canInteract === s2.canInteract
    ));

  const allowContinueFromStartMultiply$ = stateChange$
    .filter(state => state.step === 1 && !state.canInteract)
    .compose(delay(styles.step1Duration1 + styles.step1Duration2))
    .mapTo(null);

  const allowContinueFromNextComb$ = stateChange$
    .filter(state => isInCombStep(state) && !state.canInteract)
    .compose(delay(styles.nextCombDuration))
    .mapTo(null);

  const allowContinueFromEnd$ = stateChange$
    .filter(state => state.step === lastCombStep(state) + 1 && !state.canInteract)
    .compose(delay(styles.finalResultDuration))
    .mapTo(null);

  return xs.merge(
    allowContinueFromStartMultiply$,
    allowContinueFromNextComb$,
    allowContinueFromEnd$,
  );
}

export default function timers(state$: Stream): Stream {
  const stateChange$ = state$
    .compose(dropRepeats((s1: State, s2: State) =>
      s1.step === s2.step && s1.canInteract === s2.canInteract
    ));

  const allowContinueFromStartMultiply$ = stateChange$
    .filter(state => state.step === 1 && !state.canInteract)
    .compose(delay(styles.step1Duration1 + styles.step1Duration2))
    .mapTo(null);

  const allowContinueFromNextComb$ = stateChange$
    .filter(state => isInCombStep(state) && !state.canInteract)
    .compose(delay(styles.nextCombDuration))
    .mapTo(null);

  const allowContinueFromEnd$ = stateChange$
    .filter(state => state.step === lastCombStep(state) + 1 && !state.canInteract)
    .compose(delay(styles.finalResultDuration))
    .mapTo(null);

  return xs.merge(
    allowContinueFromStartMultiply$,
    allowContinueFromNextComb$,
    allowContinueFromEnd$,

export default function timers(state$: Stream): Stream {
  const stateChange$ = state$
    .compose(dropRepeats((s1: State, s2: State) =>
      s1.step === s2.step && s1.canInteract === s2.canInteract
    ));

  const allowContinueFromStartMultiply$ = stateChange$
    .filter(state => state.step === 1 && !state.canInteract)
    .compose(delay(styles.step1Duration1 + styles.step1Duration2))
    .mapTo(null);

  const allowContinueFromNextComb$ = stateChange$
    .filter(state => isInCombStep(state) && !state.canInteract)
    .compose(delay(styles.nextCombDuration))
    .mapTo(null);

  const allowContinueFromEnd$ = stateChange$
    .filter(state => state.step === lastCombStep(state) + 1 && !state.canInteract)
    .compose(delay(styles.finalResultDuration))
    .mapTo(null);

  return xs.merge(
    allowContinueFromStartMultiply$,
    allowContinueFromNextComb$,
    allowContinueFromEnd$,
  );
}

function Task ({DOM, props$}) {
  const delete$ = DOM
    .select('.delete')
    .events('click');

  const changeText = DOM.select('.change-text');
  const changeText$ = xs.merge(
    changeText.events('keydown')
      .filter(event => event.code === 'Enter'),
    changeText.events('blur')
  ).map(event => event.target.value);

  const editing$ = xs.merge(
    DOM.select('.text').events('click').mapTo(true),
    changeText$.compose(delay()).mapTo(false)
  ).startWith(false);

  const edit$ = editing$.map(editing => changeText$.filter(() => editing)).flatten();

  return {
    DOM: xs.combine(props$, editing$).map(taskView),
    complete$: props$.map(({status}) => status === 'complete'),
    delete$,
    edit$,
    HTTP: props$.map(({id}) => ({
      url: `/tasks/${id}`
    }))
  };
}

}
      const measurements: Measurements = {
        matrixAHeight: matrixAElem.clientHeight,
        matrixBWidth: matrixBElem.clientWidth,
        matrixBHeight: matrixBElem.clientHeight,
        rowHeight: someRow.clientHeight,
      };
      return measurements;
    })
    .filter(isNotNull)
    .compose(dropRepeats((m1: Measurements, m2: Measurements) =>
      m1.matrixAHeight === m2.matrixAHeight &&
      m1.matrixBHeight === m2.matrixBHeight &&
      m1.matrixBWidth === m2.matrixBWidth
    ))
    .compose(delay(16));
}

.map(ev =>
                xs
                    .of(ev)
                    .compose>(delay(options.selectionDelay))
                    .endWhen(xs.merge(up$, move$))
            )

export default function navigation(actions: Actions): Stream {
  const goBack$ = actions.exitOfAnyKind$
    .compose(delay(100))
    .map(() => ({type: 'dismissOverlay'} as Command));

  return goBack$;
}