javascript - 如何使用另一个流临时 "block"bacon.js 中的 EventStream？

Question

我正在尝试理解 FRP 概念并使用 bacon.js 构建图像 slider 。我正在映射 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');

Answer 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 流。