jQuery resize 停止运行，抛出错误 - TypeError: this.listeners is undefined

Question

目标是根据浏览器宽度禁用或启用滑块功能。

我的代码在窗口从大到小/从小到大调整大小的前几次完美运行，但是当窗口> = 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：已安装 Migrate，版本 1.4.1 jquery-migrate.min.js:2:552

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

Will-change 内存消耗太高。预算限制是文档表面积乘以 3（289296 像素）。超出预算的 will-change 事件将被忽略。

销毁虚假 glide-custom-test-03.js:38:36

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

TypeError: this.listeners is undefinedglide.min.js:6:5987

值-/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

值-/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

Answer 1

我认为您可能想要查看测试的逻辑。甚至可能将它们移至自己的功能。基本上，您会不断检查窗口大小是否超过特定阈值。在这种情况下，宽度为 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");
  }
}

由于您没有提供 Minimal, Reproducible Example，因此我无法对其进行测试以确保其正常工作。

我将 mount 的存储移动到元素的 data 属性。这样如果你有超过1个，你可以更容易地检查状态。

希望这会有所帮助。