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

jQuery返回false必需但是破坏.each代码

2 个答案: