javascript - 使用 RxJS 重置事件超时

Question

我正在尝试 RxJS(带有 JQuery 扩展)，并尝试解决以下用例:

鉴于我有两个按钮(A 和 B)，如果在给定时间范围内单击某个“ secret 组合”，我想打印一条消息。例如，“ secret 组合”可以是在5秒内点击“ABBABA”。如果 5 秒内未输入组合，则应显示超时消息。这是我目前拥有的:

var secretCombination = "ABBABA";

var buttonA = $("#button-a").clickAsObservable().map(function () { return "A"; });
var buttonB = $("#button-b").clickAsObservable().map(function () { return "B"; });

var bothButtons = Rx.Observable.merge(buttonA, buttonB);

var outputDiv = $("#output");

bothButtons.do(function (buttonName) {
    outputDiv.append(buttonName);
}).bufferWithTimeOrCount(5000, 6).map(function (combination) {
    return  combination.reduce(function (combination, buttonName) {
        return combination + buttonName;
    }, "");
}).map(function (combination) {
    return combination === secretCombination;
}).subscribe(function (successfulCombination) {
    if (successfulCombination) {
        outputDiv.html("Combination unlocked!");
    } else {
        outputDiv.html("You're not fast enough, try again!");
    }
});

虽然这工作得相当好，但并不完全是我想要的。当在新的时间范围内第一次按下按钮 A 时，我需要重置 bufferWithTimeOrCount 。我正在寻找的是，一旦按下 secret 组合(ABBABA)，我就会想要“组合已解锁!”要显示(我不想等待时间窗口到期)。

Answer 1

Throttle是您想要的通过 react 性重置延迟效果的典型运算符。

以下是如何将 throttle 与扫描结合使用来收集 5 秒静音之前输入的组合:

var evaluationStream = bothButtons
  .merge(bothButtons.throttle(5000).map(function(){return "reset";})) // (2) and (3)
  .scan(function(acc, x) { // (1)
    if (x === "reset") return "";
    var newAcc = acc + x;
    if (newAcc.length > secretCombination.length) {
      return newAcc.substr(newAcc.length - secretCombination.length);
    }
    else {
      return newAcc;
    }
  })
  .map(function(combination) {
    return combination === secretCombination;  
  });

var wrongStream = evaluationStream
  .throttle(5000)
  .filter(function(result) { return result === false; });

var correctStream = evaluationStream
  .filter(function(result) { return result === true; });

wrongStream.subscribe(function() {
  outputDiv.html("Too slow or wrong!");
});

correctStream.subscribe(function() {
  outputDiv.html("Combination unlocked!");
});

(1) 我们扫描以连接输入字符。 (2) Throttle 等待 5 秒的事件静默，并发出该静默之前的最后一个事件。换句话说，它与延迟类似，只是当源 Observable 上看到新事件时它会重置内部计时器。我们需要重置扫描的串联 (1)，因此我们只需将相同的节流 Observable 映射到“重置”标志 (3)，扫描会将其解释为清除累加器 (acc)。

这是一个 JSFiddle .