javascript - 用于调整窗口大小的事件之前和之后的 Javascript

Question

onresize 可用于了解窗口已调整大小。在窗口调整大小之前是否有任何类似的通知/事件。我想在窗口调整大小开始之前对某些元素设置 will-change，然后在窗口调整大小后将其删除。

Answer 1

似乎没有直接的解决方案，但您可以使用一些解决方法window.addEventListener("resize",yourFunction);和一些全局变量来实现 start|end 事件（这是一种解决方法，它并不完美）。

//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());

希望它可以帮助某人。

Answer 2

在调整大小之前没有触发事件。仅在调整大小期间。大多数在 rezise 上做某事的解决方案使用 setTimeout 来检查自上次调整大小事件以来经过了一定时间。所以我猜你运气不好。