In previous post, we have follow code:
const delayMessage = (message) => hardCode(message)(createTimeout(1000)); const sequence = (...broadcasters) => (listener) => { let broadcaster = broadcasters.shift(); let cancel; let sequenceListener = (value) => { if (value === done && broadcasters.length) { broadcaster = broadcasters.shift(); cancel = broadcaster(sequenceListener); return; } listener(value); }; cancel = broadcaster(sequenceListener); return () => { cancel(); }; }; let cancelMsgs = sequence( delayMessage("Hello"), delayMessage("I"), delayMessage("am"), delayMessage("Zhentian"), delayMessage("Wan") )(log); let inputClick = addListener("#input", "click"); inputClick(cancelMsgs);
Instead of cancel the ‘delayMessage‘ in sequence like what we did in highlighted part.
We want this API:
let message = "Hello, my name is John!".split(" ");
let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => {
...
};
mapSequence((word) => delayMessage(word))(forOf(message))(console.log);
Hook things up:
1. Create innerBroadcaster
let message = "Hello, my name is John!".split(" ");
let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => {
broadcaster((value) => {
let innerBroadcaster = createBroadcaster(value);
innerBroadcaster(listener);
});
};
mapSequence((word) => delayMessage(word))(forOf(message))(console.log);
/* Hello, Symbol(done) my Symbol(done) name Symbol(done) is Symbol(done) John! Symbol(done)
Symbol(done)
Symbol(done) */
All the data come in once. What we actually want is value come one by one.
2. Buffer the value:
Create buffer to hold value, and only create innerBroadcaster for the first time.
let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => { let buffer = [] let innerBroadcaster broadcaster((value) => { if (innerBroadcaster) { buffer.push(value) } else { innerBroadcaster = createBroadcaster(value); innerBroadcaster(listener); } }); console.log(buffer) // ["my", "name", "is", "John!", Symbol(done)] }; mapSequence((word) => delayMessage(word))(forOf(message))(console.log);
/* Hello Symbol(done) */
It only log out the first value, the rest values are inside buffer. Now we need to think about how to get those value out of buffer.
The idea is recusivly calling
innerBroadcaster(listener);
3. InnerListener
let message = "Hello, my name is John!".split(" ");
let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => {
let buffer = [];
let innerBroadcaster;
let innerListener = (innerValue) => {
if (innerValue === done) {
if (buffer.length) {
const value = buffer.shift();
innerBroadcaster = createBroadcaster(value);
innerBroadcaster(innerListener);
}
return
}
listener(innerValue);
};
broadcaster((value) => {
if (innerBroadcaster) {
buffer.push(value);
} else {
innerBroadcaster = createBroadcaster(value);
innerBroadcaster(innerListener);
}
});
console.log(buffer); // ["my", "name", "is", "John!", Symbol(done)]
};
mapSequence((word) => delayMessage(word))(forOf(message))(console.log);
In the innerListener, we keep taking the value from buffer, then create innerBroadcaster and hookup with innerListener.
Now, it log out the message one by one.
Hello,
my
name
is
John!
Now we don‘t have the final ‘Symbol(done)‘ logging out.
4. Add done:
let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => { let buffer = []; let innerBroadcaster; let innerListener = (innerValue) => { if (innerValue === done) { if (buffer.length) { const value = buffer.shift(); if (value === done) { listener(done) return } innerBroadcaster = createBroadcaster(value); innerBroadcaster(innerListener); } return } listener(innerValue); }; broadcaster((value) => { if (innerBroadcaster) { buffer.push(value); } else { innerBroadcaster = createBroadcaster(value); innerBroadcaster(innerListener); } }); console.log(buffer); // ["my", "name", "is", "John!", Symbol(done)] };
5. Edge cases... Be aware the for the scenarios where the done status is not catch, sometimes this can happen because of the inner broadcasting could be not re-assigned.
let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => { let buffer = []; let innerBroadcaster; let innerListener = (innerValue) => { if (innerValue === done) { innerBroadcaster = null // when innerValue is done, allow innerBroadcaster to be reassign if (buffer.length) { const value = buffer.shift(); if (value === done) { listener(done) return } innerBroadcaster = createBroadcaster(value); innerBroadcaster(innerListener); } return } listener(innerValue); }; broadcaster((value) => { if (innerBroadcaster) { buffer.push(value); } else { innerBroadcaster = createBroadcaster(value); innerBroadcaster(innerListener); } }); console.log(buffer); // ["my", "name", "is", "John!", Symbol(done)] };
--Full Code--
import { addListener, done, createTimeout, forOf } from "./broadcasters";
import { repeatWhen, filter, hardCode } from "./operators";
import { pipe } from "lodash/fp";
let inputClick = addListener("#input", "click");
let state = (broadcaster) => (listener) => {
let state = 3;
return broadcaster((value) => {
state--;
listener(state);
});
};
let doneIf = (condition) => (broadcaster) => (listener) => {
let cancel = broadcaster((value) => {
listener(value);
if (condition(value)) {
listener(done);
cancel();
}
});
return cancel;
};
let delayMessage = (message) => hardCode(message)(createTimeout(500));
let sequence = (...broadcasters) => (listener) => {
let broadcaster = broadcasters.shift();
let cancel;
let sequenceListener = (value) => {
if (value === done && broadcasters.length) {
let broadcaster = broadcasters.shift();
cancel = broadcaster(sequenceListener);
return;
}
listener(value);
};
cancel = broadcaster(sequenceListener);
return () => {
cancel();
};
};
let message = "Hello, my name is John!".split(" ");
let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => {
let buffer = [];
let innerBroadcaster;
let innerListener = (innerValue) => {
if (innerValue === done) {
innerBroadcaster = null // when innerValue is done, allow innerBroadcaster to be reassign
if (buffer.length) {
const value = buffer.shift();
if (value === done) {
listener(done)
return
}
innerBroadcaster = createBroadcaster(value);
innerBroadcaster(innerListener);
}
return
}
listener(innerValue);
};
broadcaster((value) => {
if (innerBroadcaster) {
buffer.push(value);
} else {
innerBroadcaster = createBroadcaster(value);
innerBroadcaster(innerListener);
}
});
console.log(buffer); // ["my", "name", "is", "John!", Symbol(done)]
};
mapSequence((word) => delayMessage(word))(forOf(message))(console.log);
[Javascript] Broadcaster + Operator + Listener pattern -- 16. Map a Sequence Based on Values
原文：https://www.cnblogs.com/Answer1215/p/13959472.html