Вызов addEventListener изменить размер один раз? - PullRequest
1 голос
/ 01 апреля 2020

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

Ответы [ 2 ]

2 голосов
/ 01 апреля 2020

Следите за старой шириной при каждом изменении размера и выполняйте свои методы только в том случае, если ширина изменилась (поэтому в случае скрытия адресной строки вы можете пропустить методы):

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
    });
  } 
}
1 голос
/ 01 апреля 2020
  1. addEventListener принимает параметры в качестве третьего аргумента. И один из вариантов - один раз. Таким образом, вы можете сделать:
window.addEventListener("resize", newSize, { once: true });

Но IE не поддерживает эту опцию.

Вы можете вручную удалить слушателя после его вызова:
const handleResize = () => {
  newSize()
  window.removeEventListener("resize", handleResize)
}
window.addEventListener("resize", handleResize)
Если вы хотите сделать некоторый персонал , только если какой-то другой персонал был изменен, вы можете проверить это в своем слушателе. Например:
const currentWidth = window.innerWidth
window.addEventListener("resize", () => {
  if (window.innerWidth === currentWidth) {
    return
  }

  newSize()
  currentWidth = window.innerWidth
})

В этом случае, если была изменена только высота, newSize вызываться не будет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...