Methods
waitForRepaint(callback) → {Object}
This function has the purpose to offer a safe execution slot for code depending on an up-to-date rendering state of the DOM after a change to styles for example. Let's say you add a class to an element and right in the next line you'll want to read a layout attribute like width or height from it. This might fail, because there is no guarantee the browser actually already applied the new styles to be read from the DOM.
To wait safely for the new DOM state this method works with two stacked requestAnimationFrame calls.
Since requestAnimationFrame always happens before a repaint, two stacked calls ensure, that there has to be a repaint between them.
Parameters:
| Name | Type | Description |
|---|---|---|
callback |
function | the code to execute once the browser performed a repaint |
- Source:
- See:
Throws:
error if callback is not a function
Returns:
dictionary of ids for the inner and outer request ids, outer gets assigned right away, while inner gets assigned after first callback => {outer : 1, inner : 2}
- Type
- Object
Example
element.classList.add('special-stuff');
waitForRepaint(function(){ alert(`the new dimensions after class change are: ${element.offsetWidth}x${element.offsetHeight}`); });