Как показать непрозрачный фон в событии jQuery click

Question

Чтобы показать непрозрачный фон или анимированный GIF во время выполнения какого-либо метода после нажатия кнопки не удается показать это.Он запускается только после того, как весь код был выполнен.

Могу ли я сделать это в jQuery, то есть при рендеринге события click изменения html до и после основного кода.

Добавлен метод длительного запуска100-500 делений на страницу, которая занимает около 10 секунд, чтобы закончить.

$('#button).click(function() {   
    $('#curtain').css('visibility', 'visible');
    longRunningMethod();    
    $('#curtain').css('visibility', 'hidden');  
 });    

Проблема в том, что #curtain div никогда не показывается, так как полный javascript должен быть выполнен перед отображением всех изменений.

Стиль:

#curtain {
    position: fixed;
    _position: absolute;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    _height: expression(document.body.offsetHeight + "px");
    background-color: #CCCCCC;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    visibility: hidden;
}

Answer 1

Это своего рода хак, но если вы используете setTimeout, это может сработать.

$('#button').click(function() {   
    $('#curtain').css('visibility', 'visible');
    setTimeout(doBigJob, 100);
 });

function doBigJob()
{
    longRunningMethod();    
    $('#curtain').css('visibility', 'hidden');
}

Answer 2

У вас никогда не должно быть долго работающих методов в потоке пользовательского интерфейса веб-страницы.Это заставит страницу казаться заблокированной и очень раздражающей для пользователя.

Вместо этого вы должны использовать асинхронный обратный вызов.Я полагаю, что длительный метод выполняет некоторые вызовы AJAX.В этом случае он должен принимать функцию в качестве аргумента (например, jquery "click", "ajax" и т. Д.).Затем передайте эту функцию методу ajax в качестве обратного вызова завершения или успеха.

Затем вы можете сделать:

$('#button).click(function() {   
    $('#curtain').css('visibility', 'visible');
    longRunningMethod(function() {$('#curtain').css('visibility', 'hidden');});
 });