javascript - 调用addEventListener调整大小一次？

Question

我有一个调整大小功能，当浏览器调整大小时会触发，在桌面上它只会在页面首次加载时触发一次。但是，如果用户使用 Safari 或 Chrome 等移动浏览器，它将多次触发，因为当用户开始滚动浏览器地址栏时，底部导航将缩小或消失，导致视口(viewport)发生变化，然后触发调整大小事件.

那么，有没有办法包装函数或 addEventListener 并只让它调用函数一次，或者根据屏幕大小至少调用一次？

我在下面发布了部分 JavaScript，因此您可以看到 newSize() 函数和调整大小事件监听器。

function newSize() {
    var w = window.innerWidth;
    var h = window.innerHeight;
    if (w > h * (16 / 9)) {
        gsap.set("#svg__bg", { attr: { width: w, height: w * ratio } });
    } else {
        gsap.set("#svg__bg", {
            attr: {
                width: h / ratio,
                height: h
            }
        });
    }
    var data = svg.getBoundingClientRect();
    gsap.set("#svg__bg", {
        x: w / 2 - data.width / 2
    });
    gsap.set("#svg__bg", {
        y: h / 2 - data.height / 2
    });
}

window.addEventListener("mousedown", mouseHandler);
window.addEventListener("mouseup", mouseHandler);
window.addEventListener("mousemove", mouseMove);

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

Answer 1

每当调整大小被触发时，跟踪旧的宽度，并且仅在宽度发生变化时才执行您的方法(因此，在地址栏隐藏的情况下，您可以跳过这些方法):

var oldWidth = 0;

function newSize() {
  var w = window.innerWidth;

  if(oldWidth !== w){ // Check if width has changed
    oldWidth = w;

    var h = window.innerHeight;
    if (w > h * (16 / 9)) {
        gsap.set("#svg__bg", { attr: { width: w, height: w * ratio } });
    } else {
        gsap.set("#svg__bg", {
            attr: {
                width: h / ratio,
                height: h
            }
        });
    }
    var data = svg.getBoundingClientRect();
    gsap.set("#svg__bg", {
        x: w / 2 - data.width / 2
    });
    gsap.set("#svg__bg", {
        y: h / 2 - data.height / 2
    });
  } 
}