Javascript 调用addEventListener调整一次大小？

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

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

我在下面发布了部分JavaScript，因此您可以看到

newSize（）

函数和调整事件侦听器的大小

函数newSize（）{
var w=窗内宽度；
var h=窗内高度；
如果（w>h*（16/9））{
gsap.set（“#svg_uubg”，{attr:{width:w，height:w*ratio}）；
}否则{
gsap.set（“#svg_uubg”{
属性：{
宽度：h/比，
身高：h
}
});
}
var data=svg.getBoundingClientRect（）；
gsap.set（“#svg_uubg”{
x:w/2-数据宽度/2
});
gsap.set（“#svg_uubg”{
y:h/2-数据高度/2
});
}
window.addEventListener（“mousedown”，mouseHandler）；
window.addEventListener（“mouseup”，mouseHandler）；
window.addEventListener（“mousemove”，mousemove）；
newSize（）；
addEventListener（“调整大小”，新闻大小）；

addEventListener接受选项作为第三个参数。还有一个选择——一次。因此，您可以：

window.addEventListener（“resize”，newSize，{once:true}）；

但是IE不支持这个选项

您可以在调用侦听器后手动删除它：

consthandleresize=（）=>{
newSize（）
window.removeEventListener（“调整大小”，handleResize）
}
window.addEventListener（“调整大小”，handleResize）

如果您只想在其他人员发生更改时才执行某些人员，您可以在侦听器中进行检查。例如：

const currentWidth=window.innerWidth
window.addEventListener（“调整大小”，（）=>{
if（window.innerWidth==当前宽度）{
返回
}
newSize（）
currentWidth=window.innerWidth
})

在这种情况下，如果只更改了高度，则不会调用newSize

addEventListener接受选项作为第三个参数。还有一个选择——一次。因此，您可以：

window.addEventListener（“resize”，newSize，{once:true}）；

但是IE不支持这个选项

您可以在调用侦听器后手动删除它：

consthandleresize=（）=>{
newSize（）
window.removeEventListener（“调整大小”，handleResize）
}
window.addEventListener（“调整大小”，handleResize）

如果您只想在其他人员发生更改时才执行某些人员，您可以在侦听器中进行检查。例如：

const currentWidth=window.innerWidth
window.addEventListener（“调整大小”，（）=>{
if（window.innerWidth==当前宽度）{
返回
}
newSize（）
currentWidth=window.innerWidth
})

---

在这种情况下，如果仅更改了高度，则不会调用newSize。

在触发resize时跟踪旧的宽度，并且仅在宽度更改时执行方法（因此在地址栏隐藏的情况下，您可以跳过这些方法）：

---

每当触发resize时，跟踪旧的宽度，并且仅当宽度已更改时才执行方法（因此在地址栏隐藏的情况下，您可以跳过这些方法）：

---

这回答了你的问题吗？跟踪上一个宽度，如果新宽度不同，则只运行脚本的其余部分。或者，如果您确实希望在加载页面时只加载一次代码，那么您可能应该改用

document.onload

。每当用户在桌面上调整屏幕时，它也会再次触发

resize

事件，因此不要期望只有在您这样做时才会触发一次。这是否回答了您的问题？跟踪上一个宽度，如果新宽度不同，则只运行脚本的其余部分。或者，如果您确实希望在加载页面时只加载一次代码，那么您可能应该改用

document.onload

。任何时候，用户在桌面上调整屏幕时，它也会再次触发

调整大小

事件，因此，如果你是，不要期望只触发一次。当我回家后，我会尝试这一点以及上面的其他建议，我会回来报告！我要把你的答案标记为正确，因为它就像你说的那样有效。不过，我遇到了另一个问题，一旦用户开始滚动图像，图像就不会调整大小（这是我想要的），但现在有一个“空白”区域，您可以看到图像最初调整大小的位置。因此，我要么用CSS或其他东西找到一个解决方案，要么决定我是否应该像以前那样保持调整大小事件，让页面在用户滚动时跳转。当我回家后，我将尝试这一点以及上面的其他建议，然后我会报告！我要把你的答案标记为正确，因为它就像你说的那样有效。不过，我遇到了另一个问题，一旦用户开始滚动图像，图像就不会调整大小（这是我想要的），但现在有一个“空白”区域，您可以看到图像最初调整大小的位置。因此，我要么用CSS或其他东西找到一个解决方案，要么决定是否像以前那样保持调整大小事件，让页面在用户滚动时跳转。

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
    });
  } 
}