У меня есть функция изменения размера, которая срабатывает при изменении размера браузера, на рабочем столе она срабатывает только один раз при первой загрузке страницы. Но если пользователь находится в мобильном браузере, таком как Safari или Chrome, он будет срабатывать несколько раз, потому что, когда пользователь начинает прокручивать адресную строку браузера, а нижняя навигация уменьшается или исчезает, что приводит к изменению области просмотра, а затем запускает событие resize.
Итак, есть ли способ обернуть функцию или 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);