jquery - 如果函数到达其 "if"语句，如何防止函数执行某些操作？

Question

我正在使用 flexs 做一些 Action 。所以这是目标:当元素“三分之一”(用 pxl 宽度的文本突出显示)达到 300px 的宽度时，它必须添加类，以便元素获得 100% 的元素宽度。但是当它变成全 Angular 时，函数重新计算它的宽度值并且元素开始闪烁。查看代码片段以了解问题。

function check() {
  var width = $('.one-third').outerWidth();

  if (width < 300) {
    $('.one-third').parent().addClass('to-column')

  } else {
    $('.one-third').parent().removeClass('to-column')

  }
  $('.one-third').text(width)
}

$(document).ready(function() {
  check()
});
$(window).resize(function() {
  check()
});

body {
  background: #C38D94;
  font-family: 'Arvo', serif;
}


.fbox {
  display: flex;
  flex-flow: row wrap;
  }
.one-half:after, .one-third:after, .one-four:after, .one-five:after, .one-six:after {
  position: absolute;
  top: 0;
  right: 0;
}
.one-half:after {
  content: '2';
}
.one-third:after {
  content: '3';
}
.one-four:after {
  content: '4';
}
.one-five:after {
  content: '5';
}
.one-six:after {
  content: '6';
}
.one-half, .one-third, .one-four, .one-five, .one-six{
  position: relative;
  padding: 30px;
  background: #565676;
  margin: 1px;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  
}
.one-half {
  flex: 1 calc(50% - 4px); 
  min-width: 300px;
  }

.one-third {
  flex: 1 calc(30% - 4px);
  
}
.one-four {
  flex: 1 calc(25% - 4px);
  
}
.one-five {
  flex: 1 calc(20% - 4px);
  
}

.one-six {
  flex: 1 calc(15% - 4px);
  
}
.one-third-full {
flex: 1 100%;
}

.to-column {
  flex-flow: column
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fbox dns">   
  <div class="one-third exmpl"></div>
  <div class="one-third exmpl"></div>
  <div class="one-third exmpl"></div> 
</div> 


<div class="fbox"> 
  <div class="one-half"></div>
  <div class="one-half"></div>
</div>
  
 <div class="fbox">  
  <div class="one-third"></div>
  <div class="one-third"></div>
  <div class="one-third"></div> 
</div> 
   
<div class="fbox"> 
<div class="one-four"></div>
  <div class="one-four"></div>
  <div class="one-four"></div>
  <div class="one-four"></div>
</div>
  
  <div class="fbox"> 
  
  <div class="one-five"></div>
  <div class="one-five"></div>
  <div class="one-five"></div>
  <div class="one-five"></div>
  <div class="one-five"></div>
</div>

<div class="fbox"> 
  <div class="one-half"></div>
  <div class="one-five"></div>
  <div class="one-third"></div>
</div>
  
  <div class="fbox"> 
  <div class="one-four"></div>
  <div class="one-third"></div>
  <div class="one-half"></div>
</div>

<div class="fbox"> 
<div class="one-four"></div>
  <div class="one-four"></div>
  <div class="one-four"></div>
  <div class="one-four"></div>
</div>

<div class="fbox">
  <div class="one-six"></div>
  <div class="one-six"></div>
  <div class="one-six"></div>
  <div class="one-six"></div>
  <div class="one-six"></div>
  <div class="one-six"></div>
</div>
</div>


<div class="truth"></div>

那么这个问题怎么解决呢？还有代码 here.

Answer 1

更改您的 if 语句，如下所示。

if (width < 300 && !$('.one-third').parent().addClass('to-column').hasClass('to-column')) {
   $('.one-third').parent().addClass('to-column')
}

fiddle 链接:http://jsfiddle.net/azim101/8xkf8ntg/

希望对您有所帮助。