Здравствуйте!
Помогите, пожалуйста, в решении следующей задачи. Бьюсь уже два дня, но ничего не выходит.
Имеется элемент div, который реагирует на событие onclick:
|
Код:
|
<div onclick='doStretch(1)'> &rt;&rt; </div> |
Функция doStretch() выполняется длительное время, и для утешения пользователя нужно нарисовать progress bar. В моем случае все просто: progress bar - просто анимированный gif, который должен появиться при клике на этот div, и исчезнуть в конце работы функции doStretch():
|
Код:
|
<script language='javascript'>
function doStretch(i) {
initProgress();
/* здесь идет очень долгий процесс, для которого нужно отобразить progress bar*/
releaseProgress();
}
function initProgress() {
var progressDiv = document.getElementById("stretchProgress");
progressDiv.style.visibility = "visible";
}
function releaseProgress() {
var progressDiv = document.getElementById("stretchProgress");
progressDiv.style.visibility = "hidden";
}
</script>
...
<body>
<img src='images/progress.gif' style="visibility: hidden;" id="stretchProgress"/>
... |
Однако этот прямой подход не работает. Браузер сначала полностью выполняет функцию doStretch() и только после этого отображает результат выполнения функций initProgress() и releaseProgress(), т.е. показывает и прячет картинку, символизирующую progress bar. Я понял это поведение следующим образом: браузер не скидывает свой буфер (где картинка уже стала visible) на отображение, но функции подобных flush() я в JS не нашел (я новичок в JavaScript).
Желаемый, но абсолютно неприемлемый результат получается, если написать функцию initProgress() с alert'ом:
|
Код:
|
function initProgress() {
var progressDiv = document.getElementById("stretchProgress");
progressDiv.style.visibility = "visible";
alert("все что угодно");
} |
Т.к. alert() является блокирующим вызовом, то браузер прерывает исполнение скрипта и выводит текущий результат на экран, а затем уже продолжает выполнять сценарий после исчезновения alert'а. Но alert, как вы понимаете, здесь недопустим, а других блокирующих вызовов типа sleep(), насколько я знаю, в JavaScript нет.
Может кто-нибудь знает, как можно выйти из этой ситуации? Помогите, пожалуйста.