<button id="add-one">+1</button>
<h1 id="fast"></h1>
<h1 id="slow"></h1>
window.ActorSystem = tarant.ActorSystem
window.Actor = tarant.Actor
window.Topic = tarant.Topic
let system = ActorSystem.default()
async function sleep(ms: number): Promise<any> {
return await new Promise(ok => {
setTimeout(ok, ms)
})
}
class AddOneTopic {
onAddOne() {}
}
class Adder extends Actor {
constructor({topic, name, time}) {
super()
this.time = time
this.name = name
this.count = 1
}
async onAddOne() {
this.count++;
document.getElementById(this.name).innerText = `${this.name} -> ${this.count}`
return await sleep(this.time)
}
}
let topic = Topic.for(system, "add-one", AddOneTopic)
topic.subscribe(system.actorOf(Adder, [{ topic, name: "fast", time: 50 }]))
topic.subscribe(system.actorOf(Adder, [{ topic, name: "slow", time: 2000 }]))
window.onload = () => {
document.getElementById("add-one").addEventListener('click', () => {
topic.onAddOne()
})
}
This Pen doesn't use any external CSS resources.