调整大小函数多次触发

Question

我正在使用 resize() 方法运行一个将返回的函数 各种视口大小，如 992,768 等。问题是 函数每次执行都会导致 DOM 出现故障。例子 在代码笔https://codepen.io/paul-solomon/pen/WBEgQe

//javascript

$(window).resize(function(){
nh_masonry.data.loadorder();
});


//css

.masonry_grid_quarter__container{
 margin-bottom: 8px;
 column-count:3;
 column-gap:8px;
}

@media screen and (max-width:992px){
.masonry_grid_quarter__container{
 column-count:2;
 }
}

@media screen and (max-width:768px){
 .masonry_grid_quarter__container{
  column-count:2;
  }
}

@media screen and (max-width:580px){
 .masonry_grid_quarter__container{
  column-count:1;
  }
 }

预期结果：调整大小函数在特定视口处执行 实际结果：多次执行 resize 会造成 DOM 故障。

Answer 1

您需要一个变量来跟踪 DOM 的当前状态。

让我们创建一个名为currentViewPort 的变量，它的值可以是“desktop”、“tablet”或“mobile”。

当窗口调整大小时，我们将切换currentViewPort 的值。如果currentViewPort 已经匹配了我们的屏幕布局，那么我们将不会再次调用该函数。只有当我们进入不同的布局时才会调用它。

它正在运行：https://codepen.io/anon/pen/GaGboG?editors=1111

   var App = (function ($) {

   var nh_masonry = {};
   var currentViewPort = ""
   //sets initial reorder variable
   nh_masonry.vars = { reorder : false} 

   nh_masonry.onload = function () {
            // when the document is loaded sets the reorder variable to true
            // and also loads the order object method 
            nh_masonry.vars.reorder = !nh_masonry.vars.reorder;
            nh_masonry.data.loadorder();

     $(window).resize(function(){
           // re-set layout after resize
           if($( window ).width() <= 992 && $( window ).width() > 768 && currentViewPort !== "desktop"){

             currentViewPort = "desktop"
             console.log("desktop");
              nh_masonry.data.loadorder();
              // nh_masonry.responsive.tablet();
              // nh_masonry.responsive.mobile();

           } else if ($( window ).width() == 768 && currentViewPort !== "tablet"){

             currentViewPort = "tablet"
             console.log("tablet");
              nh_masonry.data.loadorder();
              // nh_masonry.responsive.tablet();
              // nh_masonry.responsive.mobile();

           } else if ($( window ).width() < 768 && $( window ).width() >= 380 && currentViewPort !== "mobile"){
            currentViewPort = "mobile"
             console.log("mobile");
              nh_masonry.data.loadorder();
              // nh_masonry.responsive.tablet();
              // nh_masonry.responsive.mobile();
           }
         })  
     };