JQuery возвращает false необходимо, но взломать каждый код

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

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

Answer 2

Попробуйте этот оптимизированный код:

(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);