Wait gif не будет отображаться непосредственно перед вызовом JQuery .each

Question

Я пытаюсь получить gif gg для отображения, пока мои данные загружаются. Я просто звоню $(element).show() непосредственно перед входом в мой цикл $(element).each(), который отображает все дочерние сетки (то есть DisplayInnerTable()) с использованием данных.

Кажется, я сузил проблему до метода .each(). Если я удалю весь код внутри .each(), gid wait пока не отобразится, и да, я также удалю .hide(). Если я установил точку останова непосредственно перед .each(), отобразится экран gif ожидания. Кажется, это проблема с синхронизацией, например, .each() происходит так быстро, что wait.gif внутри div не имеет времени на визуализацию. И хотя на этой ноте, почему Javascript-поток предотвращал манипулирование элементами html?

Я нашел похожие статьи, но никто из них не ответил на эту конкретную проблему. Большинство других статей рекомендуют использовать setTimeout(). хорошо, я пробовал это всеми возможными способами, не повезло. Любая помощь, подсказки или подсказки будут высоко оценены.

Вот мои фрагменты кода:

$(document).ready(function() 
    { 
    $('#expand-all').on('click', function() { 
     $("#loader-wait-ani").show(); 
     ExpandAllChildGrids(); 
    }); 

    function ExpandAllChildGrids() 
    { 
     var tr; 
     $('#result-table tbody tr').each(function (value, index) { 
      tr = $(this).closest('tr'); 
      var row = outerTable.row(tr); 
      userId = row.cell(tr, 1).data(); 

     DisplayInnerTable(userId, row, tr); 
     }); 
     $('#expand-all-img').attr('src', '/Images/minus.gif'); 
     $("#loader-wait-ani").hide(); 
    } 
}); 

Вот мой HTML:

<div style="width:100%; margin: 0 auto; text-align:center;"> 
     <div id="loader-wait-ani" class="modal" style="display: none; z-index: 300;"> 
      <img src="~/Images/waitbar.gif" alt="Pleae Wait..." width="250" height="20" /> 
     </div> 
    </div> 

Answer 1

Попробуйте это. Это обратный вызов на show() и обратный вызов на DisplayInnerTable()

$(document).ready(function() 
    { 
    $('#expand-all').on('click', function() { 
     $("#loader-wait-ani").show("fast", function(){ 
      ExpandAllChildGrids(); 
     }); 
    }); 

    function ExpandAllChildGrids() 
    { 
     var tr; 
     callDisplayInner(hideLoader); 
     $('#expand-all-img').attr('src', '/Images/minus.gif'); 

    } 
}); 

function hideLoader(){ 
     $("#loader-wait-ani").hide(); 
} 

function callDisplayInner(hideLoader){ 
     $('#result-table tbody tr').each(function (value, index) { 
      tr = $(this).closest('tr'); 
      var row = outerTable.row(tr); 
      userId = row.cell(tr, 1).data(); 

     DisplayInnerTable(userId, row, tr); 
     }); 
     hideLoader(); 
} 

Answer 2

Использование async: false в каждом цикле вы будете блокировать браузер до тех пор, Reponses для всех запросов не было отослано. Браузер не будет делать рендеринга, пока ваш код не достигнет конца вашего обратного вызова по клику.

С учетом этого вам нужно будет запросить данные async и после того, как все данные будут загружены, вам нужно скрыть свой загрузочный gif. Я предполагаю, что вы используете метод ajax для jQuery, чтобы вы могли использовать возвращаемый Defere для отслеживания ваших запросов.

Некоторые вещи так:

function DisplayInnerTable(userId, row, tr, callback) { 
    //return the Defered object of the jQuery request 
    return $.ajax('/request/to/url'); 
} 


$(document).ready(function() { 
    $('#expand-all').on('click', function() { 
    $("#loader-wait-ani").show(); 
    ExpandAllChildGrids(); 
    }); 


    function ExpandAllChildGrids() { 
    var tr; 
    var allRequests = []; 
    $('#result-table tbody tr').each(function(value, index) { 
     tr = $(this).closest('tr'); 
     var row = outerTable.row(tr); 
     userId = row.cell(tr, 1).data(); 

     //collect all Deferes in an array 
     allRequests.push(DisplayInnerTable(userId, row, tr)); 
    }); 


    $.when.apply($, allRequests) 
     .then(function() { 
     // will be executed when all requests are finished 
     $('#expand-all-img').attr('src', '/Images/minus.gif'); 
     $("#loader-wait-ani").hide(); 
     }) 
    } 
}); 

Вот некоторые связанные информация:

• Wait until all jQuery Ajax requests are done?
• $.when.apply($, allRequests): Pass in an array of Deferreds to $.when()