Signatur
Beschreibung
Die schreibgeschützte Eigenschaft time eines IntersectionObserverEntry enthält einen DOMHighResTimeStamp. Er gibt in Millisekunden (mit Nachkommastellen) an, wann der Browser die Änderung der Schnittfläche zwischen Ziel- und Wurzelelement festgestellt hat. Gemessen wird relativ zum Zeitursprung des Dokuments, also auf derselben Zeitachse wie performance.now().
Nützlich ist der Wert vor allem, um Sichtbarkeitsdauern zu messen, etwa für Werbe-Impressionen („mindestens 1 Sekunde zu 50 % sichtbar“), für Lese-Analysen oder um Scroll-Verhalten auszuwerten. Da die Callbacks des Observers asynchron und gebündelt laufen, beschreibt time den tatsächlichen Zeitpunkt der Änderung genauer als ein performance.now(), das man erst im Callback aufruft.
Wenn ein Element sichtbar wird, merkt man sich den time-Wert. Wird es wieder unsichtbar, ergibt die Differenz der beiden Einträge die Sichtbarkeitsdauer. Beide Werte liegen auf derselben Zeitachse und lassen sich direkt voneinander abziehen.
Rückgabewert
performance.timeOrigin. Der Wert kann Nachkommastellen haben.Beispiele
Zeitpunkt einer Sichtbarkeitsänderung ausgeben
const target = document.querySelector('#hero');
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
const status = entry.isIntersecting ? 'sichtbar' : 'unsichtbar';
console.log(`${status} nach ${entry.time.toFixed(1)} ms`);
}
});
observer.observe(target);Sichtbarkeitsdauer messen (z. B. für Lese-Analysen)
const visibleSince = new WeakMap();
const totalVisible = new WeakMap();
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
visibleSince.set(entry.target, entry.time);
} else if (visibleSince.has(entry.target)) {
const duration = entry.time - visibleSince.get(entry.target);
const sum = (totalVisible.get(entry.target) ?? 0) + duration;
totalVisible.set(entry.target, sum);
visibleSince.delete(entry.target);
console.log(`${entry.target.id}: ${Math.round(sum)} ms sichtbar`);
}
}
}, { threshold: 0.5 });
document.querySelectorAll('article').forEach((el) => observer.observe(el));Werbe-Impression nach 1 Sekunde Sichtbarkeit zählen
const ad = document.querySelector('.ad-banner');
let startedAt = null;
let timer = null;
const observer = new IntersectionObserver(([entry]) => {
if (entry.intersectionRatio >= 0.5) {
startedAt = entry.time;
// Restzeit ab dem echten Änderungszeitpunkt berechnen
const elapsed = performance.now() - startedAt;
timer = setTimeout(() => {
console.log('Impression gezählt');
observer.disconnect();
}, Math.max(0, 1000 - elapsed));
} else {
clearTimeout(timer);
startedAt = null;
}
}, { threshold: [0, 0.5] });
observer.observe(ad);// Wichtig · Fallstricke
- Kein Unix-Zeitstempel:
timeist relativ zum Zeitursprung des Dokuments. Für eine absolute Zeit verwendet manperformance.timeOrigin + entry.time. MitDate.now()lässt sich der Wert nicht direkt vergleichen. - Verzögerter Callback: Der Callback läuft oft deutlich später als
entry.time, weil er gebündelt und mit niedriger Priorität ausgeführt wird. Für Zeitmessungen deshalb immerentry.timenehmen und nichtperformance.now()im Callback. - Reduzierte Genauigkeit: Zum Schutz vor Timing-Angriffen (Spectre) runden oder verrauschen Browser hochauflösende Zeitstempel, besonders ohne Cross-Origin-Isolation. Die Werte sind also nicht mikrosekundengenau.
- In iframes und Workern hat jedes Dokument seinen eigenen Zeitursprung. Werte aus verschiedenen Kontexten sind daher nicht direkt vergleichbar.
- Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird ignoriert und löst im Strict Mode einen
TypeErroraus. - Kompatibilität: Chrome 51+, Firefox 55+, Safari 12.1+ und Edge 15+ unterstützen die Eigenschaft.