Question

我正试图围绕FRP概念并使用bacon.js构建图像滑块。我正在映射next按钮（这是一个人为的例子btw）点击流，如：

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，您现在可以定义＆＃34;是动画＆＃34;将状态显示为

中的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 })

如您所见，我根据moveE的否定过滤了animatingP信息流。

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

1 个答案: