浏览器调整大小后再次运行功能，该怎么办？

Question

用户调整浏览器大小后，如何再次调用此功能？

<script type="text/javascript">

    var x = window.matchMedia("(min-width: 1150px)")

  if (x.matches) { 
        $(document).on('ready', function() {

       $(".regular").slick({                 
        dots: true,
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 1,
        autoplay: true,
        utoplaySpeed: 5000
       });
      });

  } else {
        $(document).on('ready', function() {

       $(".regular").slick({                  
        dots: true,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        utoplaySpeed: 5000,
        centerMode: true
      });
    });
  }


</script>

Answer 1

您可以尝试将脚本放入函数中，并在发生window.onresize时调用该函数。

window.onresize = doStuffYouWant;

function doStuffYouWant() {
    // put your code inside here.
}

Answer 2

您应该像下面这样重写代码：

var slickSlider = function() {
  var x = window.matchMedia("(min-width: 1150px)");
  if (x.matches) {
    $(".regular").slick({
      dots: true,
      infinite: true,
      slidesToShow: 4,
      slidesToScroll: 1,
      autoplay: true,
      utoplaySpeed: 5000
    });
  } else {
    $(".regular").slick({
      dots: true,
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      utoplaySpeed: 5000,
      centerMode: true
    });
  }
};

$(function() {
  slickSlider();
});

$(window).resize(slickSlider);