tick
Waits until pending updates have been applied to the DOM.
tick(): Promise<void>async function add() {
todo.items.push(item);
await tick();
refs.list.lastElementChild.scrollIntoView();
}Behaviour
State changes are applied once per microtask. tick() waits one microtask and then flushes whatever is still queued, so after await tick() bindings, slots, lists and conditions show the new state.
| Returns | Meaning |
|---|---|
Promise<void> |
Resolves after the flush |
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>tick demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
</head>
<body>
<import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/button.html"></import-element>
<import-element from="./tick-list.html"></import-element>
<tick-list></tick-list>
</body>
</html><custom-element name="tick-list">
<script>
const log = useState({ lines: ["Line 1"] });
async function add() {
log.lines.push(`Line ${log.lines.length + 1}`);
await tick();
refs.list.scrollTop = refs.list.scrollHeight;
}
</script>
<style>
:host {
display: grid;
gap: calc(var(--spacing) * 2);
justify-items: start;
}
div {
width: calc(var(--spacing) * 60);
height: calc(var(--spacing) * 24);
overflow: auto;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: calc(var(--spacing) * 2);
}
p {
margin: 0;
}
</style>
<ui-button onclick="add()">Add a line</ui-button>
<div ref="list"><p repeat="#log.lines" as="line"><slot name="#line"></slot></p></div>
</custom-element>The new line is in the DOM after await tick(), so scrolling reaches it.