jQuery 返回 false 必要但破坏了 .each 代码

Question

我在 iOS Mobile Safari 中的页面遇到问题 - 页面在方向更改时冻结。我的函数在 $(window).resize(); 上执行，这是 Mobile Safari 监听的纵向/横向方向。

在绞尽脑汁并拼命尝试之后，我将 return false; 添加到了函数的 .each(); 部分，瞧！方向改变不再冻结！但是...

现在该函数未针对我定义的元素的 .each(); 运行。

如何让该函数针对所有元素运行，同时保持 return false; 添加的任何行为（这可以防止 Mobile Safari 冻结）？

测试站点：http://brantley.dhut.ch/

谢谢！

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;
}