在繼續循環之前等待按鈕單擊事件Javascript

Question

我有一個代碼循環，它將選項添加到彈出式模式中，每個選項旁邊都有按鈕。

在搜索循環中，有時當搜索返回多個項目時，我們必須顯示模式，並且用戶選擇哪個部分。

我想暫停循環並等待用戶選擇一個項目，然後再繼續。

我的循環

$.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

我認爲你應該重新思考你接近問題的方式。您應該使用回調激活ChoosePopup函數，根據用戶輸入完成剩餘的工作。

您可能會考慮將行數組傳遞到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

定義全局變量並根據彈出窗口的要求將代碼的其餘部分移至ChoosePopup（）函數。