Javascript jQuery resize停止运行，抛出错误-TypeError:this.listeners未定义

目标是基于浏览器宽度禁用或启用滑块功能

我的代码在窗口从大到小/从小到大调整大小的前几次都能正常工作，但当窗口>=1200且控制台显示与glide.destroy相关的“TypeError:this.listeners未定义”时，它会停止禁用滑块

我花了几个小时在谷歌上搜索这些错误，但仍然无法找到答案。我对jQuery完全不熟悉，在使用这个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");
  }
}

var-id；
var isMounted=假；
var glide=新的glide（#简介）{
类型：“旋转木马”，
差距：“12”，
监督：5，
焦点：“中心”，
断点：{
800: {
监督：2
},
480: {
监督：1
}
}
});
if（jQuery（window）.width（）<1200）{
滑翔；滑翔；
isMounted=真；
}
jQuery（窗口）.resize（函数（）{
清除超时（id）；
id=设置超时（doneResizing，500）；
});
函数doneResizing（）{
如果（isMounted==真）{
if（jQuery（window）.width（）>=1200）{
滑翔。毁灭（）；
isMounted=错误；
控制台日志（“销毁错误”）；
}
}
如果（isMounted==false）{
if（jQuery（window）.width（）<1200）{
滑翔；滑翔；
isMounted=真；
}
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

将更改内存消耗太高。预算限制是文档表面积乘以3（289296 px）。在预算范围内发生的更改将被忽略

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

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

TypeError:this.listeners未定义Glide.min.js:6:5987

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

value-/wp content/themes/mytheme/js/slider/glide/dist/glide.min.js？ver=1.1:6

forEach自托管：262

value-/wp content/themes/apt2c/js/slider/glide/dist/glide.min.js？ver=1.1:6

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

---

我想你可能想回顾一下你的测试逻辑。甚至可以将它们移动到自己的功能。基本上，您一直在检查窗口大小是否超过特定阈值。在本例中，宽度为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");
  }
}

功能检查窗口（n）{
返回jQuery（window）.width（）

由于您没有提供，我无法测试它以确保它正常工作

我将挂载的存储移动到元素的data属性。这样，如果您有超过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");
  }
}

功能检查窗口（n）{
返回jQuery（window）.width（）

由于您没有提供，我无法测试它以确保它正常工作

我将挂载的存储移动到元素的data属性。这样，如果您有超过1个，则可以更轻松地检查状态

---

希望这有帮助。

一个明显的问题是将

if（isMounted==false）{

更改为

else if（isMounted==false）{

。因为您正在更改的正上方的isMounted为false，所以将始终调用它。@imvain2如果窗口大小小于1200像素，

isMounted

设置为默认值，并且有条件地修改为

true

。如果

isModified

is

true

w，则会发生冲突