Javascript before and after events for window resize

Question

onresize can be used for knowing window has been resized. Is there any similar notification/event before window resizes. I want to set will-change on some elements before window resize starts and subsequently remove that after window has resized.

Answer 1

There are no events that fire before resize. Only during resize. Most solutions to do something on rezise use setTimeout to check when a certain amount of time passed since the last resize event. So I guess you're out of luck.

Answer 2

It seems there are no direct solutions but you can achieve both start|end events with some workaround using window.addEventListener("resize",yourFunction); and some global variables (it is a workaround, it is not perfect).

//Accesible variables
var atStart = true;
var timer;

function yourFunction(){
    return ()=>{
        if(atStart){
          console.log("START");
          //Some code to be executed once at start
          atStart = false;
        }
        console.log("WHILE");
        //Some code to be executed while resizing

        if (timer) clearTimeout(timer);
        timer= setTimeout(atEnd, 500);
    }
}

function atEnd(){
    //Some code to be executed at the end of resizing
    //..well some 500ms after the end of resizing
    console.log("END")
    atStart = true;
}

window.addEventListener("resize",yourFunction());

Hope it helps someone.