jQueryベースのカルーセルとウィンドウのサイズ変更に関する問題

Question

windowのサイズを変更すると、私のカルーセルが面白い動作をする原因となるコードに奇妙なバグがあります。

コードポイントを実行してウィンドウのサイズを変更すると、カルーセルが10秒のタイマーを避けて前後に高速に移動し始めます私はそれに置いた。 https://jsfiddle.net/zeropsi/ufvLn25b/

任意の考え：ここ

は私の例のバイオリンへのリンクですか？

Answer 1

問題が発生するのは、ウィンドウのサイズが変更されると、window.resizeが何度もトリガされ、そのカルーセルが急速にスライドするためです。私は 'jquery window resize trigger 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/