Public
Edited
May 28, 2021
Importers
4 stars
asyncVisible = dom => {
const cb = change => entries => change(entries.pop().intersectionRatio > 0);
const options = { threshold: [0, 0.001] };
const newObserver = change => new IntersectionObserver(cb(change), options);
return asyncObserve(change => newObserver(change).observe(dom));
}
visible = asyncVisible(div)
Ticker = () => {
let i = 0;
const generator = {
next: async () => Promises.delay(1000, { value: ++i }),
[Symbol.asyncIterator]: () => generator
};
return generator;
}
ifVisible(div, Ticker())
div = html`<div style="background: black; height: 300px; display: flex">`
ifVisible = async function*(dom, iterable) {
const visibility = asyncVisible(dom);
const iterator = iterable[Symbol.asyncIterator]();
let promise;
while (true) {
const visible = (await visibility.next()).value;
if (visible) {
let first;
while (true) {
first = await Promise.race([
visibility.next().then(v => v.value),
promise || iterator.next()
]);
if (typeof first != "boolean") {
if (first.done) break;
yield first.value;
promise = iterator.next();
} else if (!first) break;
}
if (first.done) break;
}
}
}
import { asyncObserve } from "@ehouais/es2018-asynchronous-iterators"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
