Menu
I am using the Intersection Observer API and I was wondering:
How can I debounce or throttle the Intersection Observer API?
If I want to increase the performance, do you recommend to use a debounce or throttle function?
509
The IntersectionObserver interface's read-only rootMargin property is a string with syntax similar to that of the CSS margin property. Each side of the rectangle represented by rootMargin is added to the corresponding side in the root element's bounding box before the intersection test is performed.
The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
A single entryYou can refer to each element as an entry by the observer. An IntersectionObserverEntry object holds intersection information for a given target. The information can be something like the ratio of the intersection, the time at which the intersection happened, or the dimensions of the target and so on.
Observer in general (not only intersection observer, but also mutation observer, ...) are all handled by the browser. Meaning the browser decides when the Observer should be executed.
That's why you only define thresholds and depending on the load, they are more or less accurate. For example, when you define a threshold for 20% on the Intersection Observer, it may be executed at 20.6%. That's because the browser debounces (delay might be the better word here) the function automatically and only executes it once it has enough resources to execute it.
This is also true for all other observers.
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
