Provedení kódu po příštím překreslením stránky

Na začátek, tento příspěvek je inspirován problémem provedení kódu po změně v DOMu podrobně popsaného v When DOM Updates Appear to Be Asynchronous. Problémem je, že window.requestAnimationFrame volá callback před následujícím překreslením viz dokumentace.

Kombinací dvou window.requestAnimationFrame zařídíme zavolání callbacku před druhým následujícím překreslení. Obecná funkce by mohla vypadat nějak takto:


1
2
3
4
5
6
7
8
9
10
11
12
13

function requestNextAnimationFrame(callback){
    return requestAnimationFrame(
        requestAnimationFrame.bind(null,
            callback
    ));
}
function requestNextAnimationFrame_(){
    return new Promise(resolve=>
        requestAnimationFrame(
            requestAnimationFrame.bind(null,
                resolve
    )));
}

Funkce pro zavolání callbacku po příštím překreslení stránky (podtržítko mám jako úzus pro funkce vracející Promise)