來自值的Bacon.js EventStream

Question

假設我的代碼中有一個任意值：var arbitraryValue = null;

我的代碼中有多個位置可以更改此值。 我可以創建一個基於此值更改的EventStream嗎？ 換句話說，如果更改了arbitraryValue，新值將作為EventStream發送給訂閱者？

Answer 1

使用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"

現在，您的訂閱者將立即獲得當前值（如果有的話）。

Answer 2

謝謝你的回答！ 也許Bacon.js不是我想要的，所以我決定制作自己的“反應式編程”庫。 它立即計算新值，而無需使用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

Answer 3

檢查值是否更改

在js中檢查變量的值是否變化並不那么難。

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); 
}

在代碼開頭的某處調用此函數將檢查你的價值已改為每interval毫秒。 要停止此過程，您需要做的就是清除間隔。 注意我已經將變量放在變量內部以清除可能的間隔。

清除間隔將如下：

clearInterval(checkInterval);

注意：請設置間隔，以便每隔一秒左右檢查一次。 （1000毫秒）。 它可能不需要低於它，更頻繁地檢查只是給瀏覽器不必要的工作。

我希望這回答了你的問題！