Ждите события нажатия кнопки перед циклом продолжения Javascript

Question

У меня есть цикл кода, который добавляет параметры всплывающего мода, с кнопками рядом с каждой опцией.

В цикле поиска иногда, когда поиск возвращает несколько элементов, мы должны показать модальный, и пользователь выбирает, какую часть.

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

МОЕГО LOOP

$.each(rows, function (index, item) { 
    SearchItems(item.split('\t')[0], item.split('\t')[1]); 
}); 

ПОИСКА ФУНКЦИИ

function SearchItems(searchedPart, quantity) { 

    $.ajax({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     url: "OrderFormServices.asmx/GetItemInfoAdmin", 
     data: "{'itemname':'" + searchedPart + "','quantity':'" + (quantity || 1) + "', 'guid':'" + custGuid + "' }", 
     dataType: "json", 
     success: function (result) { 

      result = result.d; 

      if (result.length > 1) { 

       var htmlString = ""; 
       $.each(result, function(index, item) { 
        item.PartNumber = (item.PartNumber != "") ? item.PartNumber : item.ItemName; 
        htmlString += "<tr><td>" 
         + "<input type=\"hidden\" name=\"ItemID\" value=\"" + item.ItemID + "\">" 
         + "<input type=\"hidden\" name=\"ItemCode\" value=\"" + item.ItemCode + "\">" 
         + "<input type=\"hidden\" name=\"Price\" value=\"" + item.Price + "\">" 
         + "<input type=\"hidden\" name=\"Quantity\" value=\"" + item.Quantity + "\">" 
         + "<input type=\"hidden\" name=\"CustomerReference\" value=\"" + searchedPart + "\">" 
         + "<input type=\"hidden\" name=\"PackQuantity\" value=\"" + item.PackQuantity + "\">" 
         + "<input type=\"hidden\" name=\"FreeStock\" value=\"" + item.FreeStock + "\">" 
         + item.PartNumber + "</td><td>" 
         + item.ManufacturerName + "</td><td>" 
         + item.ItemName + "</td><td>" 
         + item.ItemDescription + "</td><td><input type='button' name=\"selectPopup\" onclick=\"ChoosePopup($(this).closest('tr'));\" class='btn btn-primary btn-xs' value='Select'></td></tr>"; 
       }); 
       $("#tbodyPopupContent").html(htmlString); 
       $("#PopUpNormalProduct").modal(); 
       modalfix(); 
       $("#divPopupWindow").parent("").addClass("quicksearchpopup"); 

////////////////////////////////////////////////////////////////////////// 
//////////////// WAIT FOR BUTTON CLICK AND PERFORM CODE/////////////////// 
////////////////////////////////////////////////////////////////////////// 

       $("#partNumber").prop("disabled", false); 

      } else if (result.length < 1) { 
       $("#partNumber").prop("disabled", false); 
       $('#partNumber').focus(); 
      } 
      else { 
       /////// 
      } 
     } 
    }); 
} 

кнопки Всплывающего пункт огня ChoosePopup() функции.

function ChoosePopup(row) { 

    var $hidden_fields = row.find("input:hidden"); 
    var $tds = row.find("td"); 

    var newItem = { 
     ItemID: parseFloat($hidden_fields.eq(0).val()), 
     ItemCode: $hidden_fields.eq(1).val(), 
     ItemDescription: $tds.eq(3).text(), 
     ItemName: $tds.eq(2).text(), 
     Price: parseFloat($hidden_fields.eq(2).val()), 
     Quantity: parseFloat($hidden_fields.eq(3).val()), 
     CustomerReference: $hidden_fields.eq(4).val(), 
     PackQuantity: parseFloat($hidden_fields.eq(5).val()), 
     FreeStock: parseFloat($hidden_fields.eq(6).val()) 
    }; 

    AddNewRow(newItem, true); 
    $("#PopUpNormalProduct").modal("hide"); 
} 

Как я могу ждать этого ChoosePopup() функции завершения, прежде чем продолжить цикл?

Answer 1

Я думаю, вам следует подумать о том, как вы приближаетесь к проблеме. Вы должны запустить функцию SelectPopup с помощью обратного вызова для выполнения остальной части работы на основе пользовательского ввода.

Возможно, вы можете передать массив строк в функцию SearchItems, чтобы вы могли настроить обратный вызов для повторения остальных элементов в строках.

Вот пример, который не требует дублирования кода.

const items = [1, 2, 3, 4, 5] 
 

 
//main function which writes buttons from an array 
 
function makeButtons(array) { 
 
    //copy the array so we can keep track of which items are left to process after click event 
 
    var unProcItems = array.slice() 
 
    $.each(array, function(index, item) { 
 

 
    var exit = false 
 
     //remove the item from the processed array 
 
    unProcItems.splice(unProcItems.indexOf(item), 1) 
 

 
    //make our button 
 
    var button = document.createElement('button') 
 
    button.innerHTML = `Button ${item}` 
 

 
    //if something then hook up a click event with callback 
 
    if (item == 3) { 
 
     button.onclick = function(event) { 
 
     //call our makeButtons function in the callback passing in the unprocessed items array 
 
     makeButtons(unProcItems) 
 

 
     //remove the click event so it can't be fired again 
 
     event.target.onclick = null 
 
     } 
 
     exit = true 
 
    } 
 
    document.getElementById('content').append(button) 
 

 
    //exit the loop if our flag was set 
 
    if (exit) 
 
     return false; 
 

 
    }) 
 
} 
 

 
makeButtons(items);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content"> 
 

 
</div>

Answer 2

Определите глобальные переменные и в зависимости от того, что запрашивает всплывающее окно, переместите остальную часть вашего кода в функцию SelectPopup().