基于jQuery的轮播和窗口调整大小的问题

Question

我的代码中有一个奇怪的错误，如果window被调整大小，导致我的旋转木马表现得很有趣。

我无法确定可能导致问题的原因，但是如果您运行代码然后调整窗口大小，旋转木马将开始快速来回移动，避免我放置的10秒计时器在上面。

这是我的例子小提琴的链接：https://jsfiddle.net/zeropsi/ufvLn25b/

有什么想法吗？

Answer 1

问题是当窗口调整大小时，window.resize会被触发多次，因为旋转木马会一直快速滑动。我搜索了'jquery window resize trigger after complete'并找到了帮助。这就是我从小提琴中修改你的代码的方法。

        <script>

        $(document).ready(function() {
          $(document).on("click", ".carousel-indicators li", function() {
            $(".carousel-indicators li").removeClass("active");
            var a = $(this).data("slide");
            $(this).addClass("active");
            $("div#billboards").animate({
              "left": (a * -100) + "%"
            });
            $(".billboard").removeClass("active");
            $(".billboard[data-billboard='" + a + "']").addClass("active");
            return false;
          });

        //  var resizeTimer;
        //
        //  $(window).on("resize", function() {
        //      console.log("window resized");
        //      
        //      clearTimeout(resizeTimer);
        //      resizeTimer = setTimeout(function() {
        //        // run code here, resizing has stopped
        //        BillboardCarousel.init();
        //      },10000);
        //    
        //  });

        var id;
        $(window).on("resize", function() {
            clearTimeout(id);
            id = setTimeout(doneResizing, 500);

        });

        function doneResizing(){
          BillboardCarousel.init();
        }

          if ($("section#carousel").length === 1) {
            BillboardCarousel.init();
          }

        });

        var BillboardCarousel = {
          init: function() {
            BillboardCarousel.resize();
          },
          imagesLoaded: function() {
            var imagesLoaded = 0;
            $(".billboard").each(function() {
              var image = new Image();
              image.src = $(this).data("image");
              image.onload = function() {
                imagesLoaded++;
                if (imagesLoaded === $(".billboard").length) {
                  BillboardCarousel.startCarousel();
                }
              };
            });
          },
          startCarousel: function() {
            var interval = parseInt($("div#billboards").data('interval'));
            window.setInterval(function() {
              BillboardCarousel.timer();
            }, 10000);
          },
          resize: function() {
            var a = $(".billboard").length;
            var b = $(window).width();
            $(".billboard").css({
              "width": b + "px",
              "float": "left",
              "display": "inline-block"
            });
            $("div#billboards").css({
              "width": a * 100 + "%",
              "left": "0%"
            });
            $("div#billboards").attr("data-interval", 10000);
            BillboardCarousel.imagesLoaded();
          },
          timer: function() {
            var a = $(".billboard.active").data("billboard");
            a++;
            if (a >= $(".billboard").length) {
              a = 0;
            }
            $(".billboard").removeClass("active");
            $(".carousel-indicators li").removeClass("active");
            $(".billboard[data-billboard='" + a + "']").addClass("active");
            $(".carousel-indicators li[data-slide='" + a + "']").addClass("active");
            $("div#billboards").animate({ "left": (a * -100) + "%" });
          }
        };


    </script>

这些是一些有用的链接 - JQuery: How to call RESIZE event only once it's FINISHED resizing? http://jsfiddle.net/Zevan/c9UE5/1/ https://css-tricks.com/snippets/jquery/done-resizing-event/