Индикатор выполнения JQuery останавливает анимацию при открытии другой вкладки

Question

Индикатор выполнения JQuery останавливает анимацию при открытии другой вкладки

0

У меня есть функция оживить индикатор выполнения во время обработки данных внутри div. Строка выполнения div находится в dataprocess.php (родительская страница), и процесс выполняется внутри iframe, который вызывает страницу generate.php. Моя функция выполнения в dataprocess.php выглядит следующим образом:

function progressBar(percent, element)
{
    var progressBarWidth = percent * ($(element).width()) / 100;
    progressBarWidth = progressBarWidth-10;
    $(element).find('div').animate({ width: progressBarWidth }, 5).html(percent + "%&nbsp;");
}

Страница div на странице dataprocess.php: -
<div id = "progressBar" class= "default"> <div> </div> </div>

В цикле while внутри generate.php(iframe) я вызываю функцию PHP, как показано ниже, чтобы сделать индикатор выполнения в родительском анимате:

function progress($percent)
{
    echo '<script type="text/javascript">
          parent.progressBar('.$percent.', "#progressBar");
          </script>';
}

Индикатор выполнения работает нормально, но проблема заключается в том, что у меня в браузере более 1 вкладки. Теперь я делаю обработку данных на вкладке 1, этот процесс займет около 10-15 минут. Скажем, теперь индикатор выполнения составляет 25%, чем я решил перейти на другую вкладку, что означает, что вкладка 1, может быть, я могу сказать в состоянии ожидания. Через некоторое время я вернусь к вкладке 1. Я вижу, что процент показывает 100%, но индикатор выполнения продолжает оживать с 25% до 100%. Процесс уже выполнен, но индикатор выполнения останавливается, если я перехожу на другую вкладку и вернусь только назад, когда вернусь на вкладку обработки данных.

Благодарю.

errorare 22 окт. 2013, в 06:50

Источник

Теги:

php

javascript

jquery

1 ответ

Ещё вопросы

geevee · Accepted Answer · 2013-10-22T06-44-00.000Z

в этом случае попробуйте использовать css3-переходы вместо js-анимаций.

заменить:

$(element).find('div').animate({ width: progressBarWidth }, 5).html(percent + "%&nbsp;");

с:

$(element).find('div').width(progressBarWidth).html(percent + "%&nbsp;");

и добавьте css для этого div который вы хотите оживить, позвоните, например, myDiv:

#myDiv{transition:width .1s ease;-moz-transition:width .1s ease;-webkit-transition:width .1s ease;-ms-transition:width .1s ease;}

надеюсь, это поможет

Спасибо за это решение. Это работает для меня.