Как преобразовать цикл с асинхронной операцией внутри

Question

У меня есть сценарий, где я переменное количество сетей на странице, и когда пользователь нажимает кнопку, мне нужно сделать следующее:

Для каждой сетки

1. Получить некоторые данные из сетки
2. Показать диалоговое окно, чтобы написать некоторые данные
3. сделать операцию $ .post() после закрытия диалогового окна
4. процесса следующая сетка

Вот фрагмент кода, что я делаю

for (var i = 0; i < grids.length; i++) { 
    var grid = grids[i]; 

    // Process some grid's data 
    ... 

    // Show a dialog box to write some extra data 
    dialog.open(); // dialog is a Telerik Window widget 

    // When the dialog box is closed do a $.post() 
    $.post(...) 
     .fail(function(error) { 

     }) 
     .done(function(data) { 

     }); 
} 

Проблема я столкнулся в том, что диалоговое окно открыто в асинхронном образом (я использую Telerik окна виджет для диалога) поэтому мне нужно преобразовать в цикл, чтобы сделать процесс синхронным.

Может ли кто-нибудь сказать мне, как это сделать?

спасибо.

Answer 1

Вы можете просто shift из массива в функции:

var grids = [ 
    1, 
    2, 
    3, 
    4 
]; 

function doSomething() { 
    if (grids.length) { 
     var grid = grids.shift(); 

     //use setTimeout as a means of async 
     setTimeout(function() { 
      //do something 
      console.log(grid); 

      if (grids.length) { 
       doSomething(); 
      } 
     }, 100); 
    } 
} 

doSomething();