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：已安装迁移版本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是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，因此我无法对其进行测试以确保其正常工作。

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

希望这会有所帮助。

jQuery调整大小功能停止，引发错误-TypeError：this.listeners未定义

1 个答案: