根据窗口宽度调整启用和禁用脚本答案

【问题标题】：Enable and disable script based on window width-resize根据窗口宽度调整启用和禁用脚本
【发布时间】：2015-11-15 13:49:15
【问题描述】：

我想要做的是例如当浏览器窗口宽度低于 1000px 时，触发脚本猫头鹰轮播。但是当浏览器窗口宽度变得大于1000px时关闭owl carousel，内容又可以正常显示了。

当窗口超过 1000 像素并将其调整为低于 1000 像素时，我设法做到了这一点，但是当我再次将其调整为超过 1000 像素时，它并没有禁用猫头鹰轮播。

我的代码

<script type="text/javascript">

$(document).ready(function() {

 $(window).resize(function() {
  if ($(window).width() < 1000) {
     $(".box").owlCarousel();
  }
 else {
    //do nothing what to put here???
 }
});
});



</script>

<div class="box">
		<div class="product"></div>
		<div class="product"></div>
		<div class="product"></div>
		<div class="product"></div>
		<div class="product"></div>
		<div class="product"></div>
		<div class="product"></div>
		<div class="product"></div>
</div>

如果窗口调整为 .box div 的大小，我也尝试使用 javascript 添加一个类，但是当它调整大小低于和高于 1000px 时，再次使用 javascript 它不会像我想要的那样动态更改。

你能告诉我实时检查浏览器宽度和启用/禁用猫头鹰轮播的最佳方法吗？

【问题讨论】：

我非常怀疑你想继续初始化它，可能想检查它是否完成。
库有destroy方法吗？

标签： javascript resize

【解决方案1】：

之前没用过owlcarousel，不过快看the docs，我觉得你想用owl.destroy()方法。

$(document).ready(function() {

  $(".owl-carousel").owlCarousel()

  //get carousel instance data and store it in variable owl
  var owl = $(".owl-carousel").data('owlCarousel')
  $(window).resize(function() {
    if ($(window).width() < 1000) {
      owl.reinit()
    } else {
      owl.destroy()
    }
  });
});

【讨论】：

感谢赫菲斯托克，它工作得很好！现在，当我调整窗口大小时，它会即时更改。

【解决方案2】：

Window.matchMedia() 可能是您的解决方案。来自文档：

返回一个新的 MediaQueryList 对象，表示指定媒体查询字符串的解析结果。

例子：

if (window.matchMedia("(max-width: 1000px)").matches) {
  $(".box").owlCarousel();
} else {
  /* however you disable the carousel... */
}

希望这会有所帮助！

【讨论】：