jQuery返回false必要，但打破。每個代碼

Question

我一直有問題，我的網頁在iOS移動Safari瀏覽器 - 頁面凍結方向的變化。我的功能在$(window).resize();上執行，這是Mobile Safari傾聽縱向/橫向的內容。

在我的大腦受到傷害並拼命嘗試之後，我將return false;添加到我的函數的.each();部分，並且瞧！方向改變不再凍結！但是...

現在函數不會爲我定義的元素的.each();運行。

我該如何讓所有元素都運行該功能，同時保持return false;增加的行爲（防止Mobile Safari凍結）？

測試地點：http://brantley.dhut.ch/

THANK YOU！

的JavaScript：

(function($){ 
$.respond = function(callback) { 

    $(document).ready(function() { 
     dimensions(); 
    }); 

    $(window).load(function() { 
     dimensions(); 
     $('#load').fadeOut('fast', function() { 
      $('.z:first').fadeIn('slow'); 
      $('#status').fadeIn('slow'); 
      $('footer').fadeIn('slow'); 
     }); 
    }); 

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

    function dimensions() { 
     var i = $('.z'); 
     i.each(function() { 

      var browserWidth = $(window).width(); 
      var imgRatio = ($(this).width()/$(this).height()); 
      var availableHeight = ($(document).height() - $('header').height() - $('#status').height() - $('footer').height() - 80); 
      var browserRatio = (browserWidth/availableHeight); 

      if (imgRatio >= 1) { 
       $(this).addClass('landscape'); 
      } 

      if (browserRatio >=1.5) { 
       $('#container').css('min-height', '360px'); 
      } else { 
       $('#container').css('min-height', '555px'); 
      } 

      if (browserRatio >= imgRatio) { 
       /* landscape */ 
       //$('body').css('background', 'blue'); 
       $(this).height(availableHeight).width('auto').css('margin-top', '0');  
      } else { 
       /* portrait */ 
       //$('body').css('background', 'green'); 
       $(this).width(browserWidth - 40).height('auto').css('margin-top', (availableHeight - $(this).height())/2); 
      } 

      $(this).css('margin-left', (browserWidth - $(this).width())/2); 

     }); 

     return false; 

    }; 

}; 
})(jQuery); 

Answer 1

試試這個優化代碼：

(function($){ 
    $.respond = function(callback) { 
     var $doc = $(document), 
      $win = $(window), 
      $z, $load, $footer, $header, $status, $container, 
      resizing = false; 

     $doc.ready(function() { 
      $z   = $('.z'); 
      $load  = $('#load'); 
      $footer  = $('footer'); 
      $header  = $('header'); 
      $status  = $('#status'); 
      $container = $('#container'); 

      dimensions(); 
     }); 

     $win.load(function() { 
      dimensions(); 
      $load.fadeOut('fast', function() { 
       $z.filter(':first').fadeIn('slow'); 
       $status.fadeIn('slow'); 
       $footer.fadeIn('slow'); 
      }); 
     }); 

     $win.resize(function() { 
      dimensions(); 
     }); 

     function dimensions() { 
      if(resizing){ 
       return; // break; the function is still running 
      } else{ 
       resizing = true; 
      } 

      var browserWidth = $win.width(), 
       imgRatio  = $this.width()/$this.height(), 
       availableHeight = ($doc.height() - $header.height() - $status.height() - $footer.height() - 80), 
       browserRatio = browserWidth/availableHeight; 

      $z.each(function() { 
       var $this = $(this); 
       if (imgRatio >= 1) { 
        $this.addClass('landscape'); 
       } 

       if (browserRatio >=1.5) { 
        $container.css('min-height', '360px'); 
       } else { 
        $container.css('min-height', '555px'); 
       } 

       if (browserRatio >= imgRatio) { 
        /* landscape */ 
        //$('body').css('background', 'blue'); 
        $this 
         .height(availableHeight) 
         .width('auto') 
         .css('margin-top', '0'); 
       } else { 
        /* portrait */ 
        //$('body').css('background', 'green'); 
        $this 
         .width(browserWidth - 40) 
         .height('auto') 
         .css('margin-top', (availableHeight - $this.height())/2); 
       } 

       $this.css('margin-left', (browserWidth - $this.width())/2); 

      }); 

      resizing = false; 
     }; 
    }; 
})(jQuery); 

Answer 2

的return false;不在.each()而是在事件處理程序本身，這意味着你要取消所有掛起的事件。

我假設你的函數正在導致另一個resize事件發生，從而導致無限循環。

通過運行處理，一旦加上使用全局標誌知道你從功能來優化的代碼，它應該工作：

第一部分：

var _resizeTimer = 0; 
$(window).resize(function() { 
    window.clearTimeout(_resizeTimer); 
    _resizeTimer = window.setTimeout(dimensions, 200); 
}); 

第二部分：

var _insideDimensions = false; 
function dimensions() { 
    if (_insideDimensions) 
     return; 
    var i = $('.z'); 
    _insideDimensions = true; 
    i.each(function() { 
     //..... 
    }); 
    _insideDimensions = false; 
}