Question

示例代码： HTML：

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

css：

*{
  margin: 0;
  padding: 0;
}

.wrap{
  width: 30%;
  height: 200px;
  background: #f7f7f7;
  float: left;
}

.wrap:not(:first-child){
  margin-left: 5%;
}

.item{
  width: 100%;
  height: 47px;
  margin-bottom: 3px;
  background: #999;
}

有效的js代码：

(function($){
          $('.wrap').each(function(){
            var thisWrap = $(this),
            naturalHeight = thisWrap[0].scrollHeight,
            restrictedHeight = thisWrap[0].clientHeight;
            if (naturalHeight - 5 > restrictedHeight){
              thisWrap.css({'background': 'red'});
            }
          });



})(jQuery);

没有的js代码：

(function($){

    function myCustomFunction(){
          $('.wrap').each(function(){
            var thisWrap = $(this),
            naturalHeight = thisWrap[0].scrollHeight,
            restrictedHeight = thisWrap[0].clientHeight;
            if (naturalHeight - 5 > restrictedHeight){
              thisWrap.css({'background': 'red'});
            }
          });
    }

    $(window).resize(function(){
      myCustomFunction();
    });

    myCustomFunction();

})(jQuery);

在this Codepen示例中，这两种方法均有效，但是在我的测试页上，当代码位于函数中并在函数定义后调用时，它不起作用。加载js时，页面上的wrap元素已经存在，js代码检测到溢出，css在第39行加载的文件中定义，js在1300+行加载。全部放入文档就绪功能无济于事。

当不在函数中时，同一文件中的此代码如何正常工作？

编辑：问题似乎出在窗口调整大小功能上，似乎是在页面加载时触发了该事件。

Answer 1

此问题是由另一个脚本引起的，该脚本将SimpleXMLElement Object ( [attribute] => Array ( [0] => SimpleXMLElement Object ( [name] => uname [value] => admin ) [1] => SimpleXMLElement Object ( [name] => playerlevel [value] => 1 ) [2] => SimpleXMLElement Object ( [name] => sessionid [value] => i9vfgvqo30c2kk2g57avmd0t ) ) )样式放在wrap-s上（因此问题是触发得太晚了）。我通过在标签更改点击上添加一个400ms的$xml = simplexml_load_string($request->body);来解决它，并在其中添加了功能。

Answer 2

要解决您的问题，请使用此

$(window).on('resize', function(){
  myCustomFunction();
});

在函数内部并被调用时，JS代码的行为不同

2 个答案: