来自值的Bacon.js EventStream

时间:2016-07-03 16:57:55

标签: javascript bacon.js

假设我的代码中有一个任意值: var arbitraryValue = null;

我的代码中有多个地方可以更改此值。我可以创建一个基于此值更改的EventStream吗?换句话说,如果更改了arbitraryValue,新值将作为EventStream发送给订阅者吗?

3 个答案:

答案 0 :(得分:2)

使用Bus代替普通值:

var arbitraryValueBus = Bacon.Bus()

现在您可以使用Bus.push设置值:

arbitraryValueBus.push(newValue)

您可以订阅Bus

来聆听价值的变化
arbitraryValueBus.forEach(newValue => console.log(newValue))

请注意,使用简单的Bus,您的订阅者将无法获得在forEach调用之前设置的值。因此,如果您要添加"当前值",并使用当前值立即调用回调,则应使用Property

var b = Bacon.Bus()
var p = arbitraryValueBus.toProperty()
p.forEach() // to make sure it's updated before adding subscribers
b.push("first value")
p.subscribe(x => console.log(x))

==> outputs "first value"

现在,您的订阅者将立即获得当前值(如果有的话)。

答案 1 :(得分:1)

感谢您的回答!也许Bacon.js不是我想要的,所以我决定制作自己的" Reactive Programming"图书馆。它立即计算新值,而无需使用setTimeout检查值。

var = createReactiveValue = function(initialValue) {
return {
    "observers": [], // Call these functions with a new value when it has been set
    "value":initialValue,
    "set": function(newValue) {
        this.value = newValue;

        this.observers.forEach(function(observer) {
            // Call observers asynchronously
            setTimeout(function() { observer(this.value) }, 0);
        })
    },
    "get": function() {
        return this.value;
    },
    "addObserver": function(observer) {
        this.observers.push(observer);
    }
};
};

// If any of the dependant values change, sets reactive value 'value' to the result of calling 'result'
var = makeReaction = function(value, dependencies, result) {
    // Start watching changes in dependencies
    dependencies.forEach(function(dependency) {
        dependency.addObserver(function(newValue) {
            var newResult = result(value, dependencies);
            value.set(newResult);
        });
    });
};


// When 'reactiveValue' is changed, calls the given 'result' function with the new value
var = watchReaction = function(reactiveValue, result) {
    // Start watching changes in reactive value
    reactiveValue.addObserver(function(newValue) {
        result(newValue);
    });
};

var a = createReactiveValue(2);
var b = createReactiveValue(1);
var c = createReactiveValue(null);

// We want c to depend on both a and b. If either a or b change, c should    automatically recalculate it's value
makeReaction(c, [a, b], function(c, [a, b]) {
    return a.get() + b.get();
});

// If c is changed, for whatever reason, log it
watchReaction(c, function(newC) {
    console.log("Reaction completed: " + a.get() + " + " + b.get() + " = " + c.get());
});

// Test it by resetting value a to random
setInterval(function()
{
    var newValue = Math.random();
    a.set(newValue); },
1000); // Logs the new result imm

编辑:现在可以作为库使用:https://github.com/Jarzka/ReaktioJS

答案 2 :(得分:0)

检查值是否更改

在js中检查变量的值是否发生变化是不是很难。

 reverse_geocoded_by "restaurants.latitude", "restaurants.longitude"

  def self.search_for_menus(params)

    menus=Menu.where("dish LIKE ?", "%#{params[:dish]}%") if params[:dish].present?
    menus= menus.joins(:restaurant).near(params[:location],2)

   menus

  end

通过阅读您的问题,我得出结论,您经常需要检查价值是否发生变化。为此,我建议使用以下功能:

build()

在代码开头的某处调用此函数将检查您的值是否每function checkValue() { var newValue = value; if (newValue != value) { // Value has changed // .... (Code that needs to be executed) } } 毫秒更改一次。要停止此过程,您需要做的就是清除间隔。注意我已将变量置于变量内部以清除可能的间隔。

清除间隔将非常简单:

function checkValue(interval) {
    var checkInterval = setInterval(function () {
        var newValue = value;
        if (newValue != value) {
            // Value has changed
            // .... (Code that needs to be executed)
        }
    }, interval); 
}

注意:请设置间隔,以便每隔一秒左右检查一次。 (1000毫秒)。可能不需要低于此值,更频繁地检查只是给浏览器不必要的工作。

我希望这能回答你的问题!