оператор if внутри цикла while. Почему он это делает?

Question

Я использую это:

//if in landscape mode
while(window.orientation == 90 || window.orientation == -90) {
                    if(!$('#page' + hiddenNextPage).hasClass('showUp')) {
                        $('#page' + hiddenNextPage).addClass('showUp');
                        $('#page' + hiddenNextPage).css('margin-left', '300px');
                    };
                }

//if in portrait mode
while(window.orientation == 0) {
                    if($('#page' + hiddenNextPage).hasClass('showUp')) {
                        $('#page' + hiddenNextPage).removeClass('showUp');
                        $('#page' + hiddenNextPage).css('margin-left', '5px');
                    };
                };

Но из-за этого мои страницы даже не загружаются ... и это занимает так много времени, чтобы загрузить это.Что-то не так?

Есть ли лучший способ постоянно проверять, была ли изменена ориентация без использования цикла while?

Это для ipad / iphoneСпасибо!

Answer 1

Я не вижу, чтобы тела ваших циклов while модифицировали тесты while. Это создает бесконечный цикл.

Answer 2

Поскольку вы меняете только стили, вы можете использовать отдельные таблицы стилей для портрета и пейзажа ...

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

EDIT

На window также есть событие onorientationchange, которое позволяет запускать код при изменении ориентации, а не постоянно запрашивать изменение ...

window.onorientationchange = function (event)
{
    if (window.orientation == 90 || window.orientation == -90)
    {
        ...
    }
    else
    {
        ...
    }
}

Answer 3

Не думаю, что вам вообще следует использовать цикл while.

Если вы хотите выполнять код периодически, используйте тайм-аут или интервал.

Кроме того, ваш jQuery оченьнеэффективно - особенно с учетом повторного запуска селектора.

var $nextPage = $('#page' + hiddenNextPage );

window.setInterval( function()
{
  if ( 0 == window.orientation )
  {
    if ( $nextPage.hasClass( 'showUp' ) )
    {
      $nextPage
        .removeClass( 'showUp' )
        .css( 'margin-left', '5px' )
      ;
    }
  }
  else if ( !$nextPage.hasClass( 'showUp' ) )
  {
    $nextPage
      .addClass( 'showUp' )
      .css( 'margin-left', '300px' )
    ;
  }
}, 100 ); // 100 means this will execute every 100 milliseconds

Answer 4

Я бы порекомендовал отдельные таблицы стилей, но на ваш вопрос постоянной проверки вы можете установить таймаут с помощью setInterval ( expression, interval );пример:

setInterval(function() {
   if ((window.orientation == 90 || window.orientation == -90) {
      if(!$('#page' + hiddenNextPage).hasClass('showUp')) {
         $('#page' + hiddenNextPage).addClass('showUp');
         $('#page' + hiddenNextPage).css('margin-left', '300px');
      }
   } else if (window.orientation == 0) {
      if($('#page' + hiddenNextPage).hasClass('showUp')) {
         $('#page' + hiddenNextPage).removeClass('showUp');
         $('#page' + hiddenNextPage).css('margin-left', '5px');
      }
   }
}
, 2000 );

edit Случайно использованный setTimeout вместо setInterval в первый раз, упс.