如何使用另一个流暂时“阻止” bacon.js 中的 EventStream？答案

【问题标题】：How can I temporarily "block" an EventStream in bacon.js using another stream?如何使用另一个流暂时“阻止” bacon.js 中的 EventStream？
【发布时间】：2014-07-28 12:43:14
【问题描述】：

我正在尝试围绕 FRP 概念展开思考，并使用 bacon.js 构建图像滑块。我正在映射next 按钮的（顺便说一句，这是一个人为的示例）点击流，例如：

var position = $slideshow.find('.next').asEventStream('click').map(function(){
    return 1;
}).scan(0, function(x,y){
    return x + y < $slideshow.find('.slide').length ? (x + y) : 0;
});

position.onValue(function(val){
    //set things
});

这很好用。现在我想在我的幻灯片前进到下一张幻灯片时禁用单击它。我能想到的所有方法都包括创建一个我提供给skipWhile 的状态变量，例如：

var isAnimating = false;
var position = $slideshow.find('.next').asEventStream('click').map(function(){
    return 1;
}).skipWhile(isAnimating).scan(0, function(x,y){
    return x + y < $slideshow.find('.slide').length ? (x + y) : 0;
});

position.onValue(function(val){
    isAnimating = true;
    //set things
});

这感觉像是在作弊（尤其是在做 FRP“练习”时......）所以我想知道是否有任何方法可以将我的点击流与动画结束事件流结合起来：

var animationEndStream = $slideshow.asEventStream('animationend');

【问题讨论】：

标签： javascript jquery frp bacon.js

【解决方案1】：

如果您设法将动画结束事件捕获为EventStream，例如animEndE，您现在可以将“正在制作动画”状态定义为Property，如下所示

var animEndE = $slideshow.asEventStream('animationend')
var nextE = $slideshow.find('.next').asEventStream('click')
var prevE = $slideshow.find('.next').asEventStream('click')
var moveE = nextE.map(1).merge(prevE.map(-1))

var animatingP = moveE.awaiting(animEndE)
var position = moveE.filter(animatingP.not()).scan(0, function(x,y) { return x+y })

如您所见，我正在根据animatingP 的否定过滤moveE 流。

【讨论】：