javascript - jQuery resize 停止运行,抛出错误 - TypeError: this.listeners is undefined
问题描述
目标是根据浏览器宽度禁用或启用滑块功能。
我的代码在窗口从大到小/从小到大调整大小的前几次完美运行,但是当窗口> = 1200并且控制台显示“TypeError:this.listeners is undefined”时,它停止禁用滑块滑翔。摧毁
我花了几个小时在谷歌上搜索这些错误,但仍然无法弄清楚。我对 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
安装真正的 glide-custom-test-03.js:44:34
will-change 内存消耗太高。预算限制是文档表面积乘以 3(289296 像素)。超出预算的意愿变化将被忽略。
销毁错误的 glide-custom-test-03.js:38:36
安装真正的 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
解决方案
我认为您可能想查看测试的逻辑。甚至可能将它们转移到自己的功能中。基本上,您会不断检查窗口大小是否超过了特定阈值。在这种情况下,宽度为 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,因此我无法对其进行测试以确保其正常工作。
我将挂载的存储移动到元素的数据属性。这样,如果您有超过 1 个,您可以更轻松地检查状态。
希望这可以帮助。
推荐阅读
- blazor - 客户端 blazor 无法加载两个隔离的 js 文件
- shopify - Google Ads 和 Tag Assistant 将我的再营销事件代码段显示为无效
- google-cloud-platform - GKE:具有 3 个副本的 Pub/Sub 和 Pod 部署
- r - 将 YYYYmmdd 的字符转换为 R 中的日期
- postgresql - 为什么 Postgres 在我的 JOIN 子句中使用顺序扫描?
- python - 不带 0 的百分位数
- html - CSS 不适用于 GitHub Pages,仅适用于本地
- javascript - moment.js - 如何防止夏令时更改日期
- mysql - 具有一对多连接的自引用 SQL 查询
- postgresql - 为什么我得到“致命:用户 postgres 的密码验证失败