jQuery resize перестает работать, выдает ошибку - TypeError: this.listeners не определен - PullRequest
Новая
       28

jQuery resize перестает работать, выдает ошибку - TypeError: this.listeners не определен

1 голос
/ 01 июля 2019

Цель состоит в том, чтобы отключить или включить функцию ползунка в зависимости от ширины браузера.

Мой код отлично работает первые пару раз, когда размер окна изменяется с большого на маленькое / маленькое на большое, но затем он прекращает отключение ползунка, когда окно> = 1200 и консоль говорит: «TypeError: this.listeners не определен по отношению к glide.destroy

Я часами гуглял эти ошибки и до сих пор не могу понять. Я совершенно новичок в jQuery, и мне очень тяжело с этим. 

var id;

var isMounted = false;

var glide = new Glide("#intro", {
  type: "carousel",
  gap: "12",
  perView: 5,
  focusAt: "center",
  breakpoints: {
    800: {
      perView: 2
    },
    480: {
      perView: 1
    }
  }
});

if (jQuery(window).width() < 1200) {
  glide.mount();

  isMounted = true;
}

jQuery(window).resize(function() {
  clearTimeout(id);

  id = setTimeout(doneResizing, 500);
});

function doneResizing() {
  if (isMounted === true) {
    if (jQuery(window).width() >= 1200) {
      glide.destroy();

      isMounted = false;
      console.log("destroy false");
    }
  }

  if (isMounted === false) {
    if (jQuery(window).width() < 1200) {
      glide.mount();

      isMounted = true;
    }
    console.log("mount true");
  }
}

Глядя на консоль моего браузера, кажется, что в какой-то момент glide.mount() начинает работать сразу после glide.destroy, и я не могу понять, почему. Вот что я вижу (имя сайта отредактировано по соображениям конфиденциальности):

JQMIGRATE: Миграция установлена, версия 1.4.1 jquery-migrate.min.js: 2: 552

mount true glide-custom-test-03.js: 44: 34

Слишком большое потребление памяти изменится Ограничение бюджета - это площадь поверхности документа, умноженная на 3 (289296 пикселей). Случаи изменения воли по бюджету будут игнорироваться.

уничтожить ложное скольжение-custom-test-03.js: 38: 36

mount true glide-custom-test-03.js: 44: 34

Ошибка типа: this.listeners - undefinedglide.min.js: 6: 5987

значение - / wp-content / themes / mytheme / js / slider / glide / dist / glide.min.js? Ver = 1.1: 6

unbind - / wp-content / themes / mytheme / js / slider / glide / dist / glide.min.js? Ver = 1.1: 6

Изменение размера - / wp-content / themes / mytheme / js / slider / glide / dist / glide.min.js? Ver = 1.1: 6

значение - / wp-content / themes / mytheme / js / slider / glide / dist / glide.min.js? Ver = 1.1: 6

forEach самостоятельно: 262

значение - / wp-content / themes / apt2c / js / slider / glide / dist / glide.min.js? Ver = 1.1: 6

значение - / wp-content / themes / apt2c / js / slider / glide / dist / glide.min.js? Ver = 1.1: 6

doneResizing - / wp-content / themes / apt2c / js / slider / glide / custom / glide-custom-test-03.js? Ver = 1.1: 37

1 Ответ

0 голосов
/ 01 июля 2019

Думаю, вы захотите пересмотреть логику своих тестов. Может быть, даже переместить их в свои функции. По сути, вы постоянно проверяете, превысил ли размер окна определенный порог. В этом случае ширина 1200. 

function checkWindow(n){
  return jQuery(window).width() < n;
}

var glide = new Glide("#intro", {
  type: "carousel",
  gap: "12",
  perView: 5,
  focusAt: "center",
  breakpoints: {
    800: {
      perView: 2
    },
    480: {
      perView: 1
    }
  }
});

var intro = jQuery("#intro").data("mounted", false);

if (checkWindow(1200)) {
  glide.mount();
  intro.data("mounted", true);
  console.log("Init, Glide: mount, Mounted: true");
}

jQuery(window).resize(function() {
  clearTimeout(id);

  id = setTimeout(doneResizing, 500);
});

function doneResizing() {
  if (intro.data("mounted") && checkWindow(1200) === false) {
    glide.destroy();
    intro.data("mounted", false);  
    console.log("Resize, Glide: destroy, Mounted: false");
  } else if (intro.data("mounted") === false && checkWindow(1200)) {
    glide.mount();
    intro.data("mounted", true);  
    console.log("Resize, Glide: mount, Mounted: true");
  }
}

Поскольку вы не предоставили Минимальный воспроизводимый пример , я не могу проверить это, чтобы убедиться, что он работает.

Я переместил хранилище монтирования в атрибут данных элемента. Таким образом, если у вас больше 1, вы можете легко проверить статус.

Надеюсь, это поможет.

...