Question

我有一个代码循环，可以为弹出模式添加选项，每个选项旁边都有按钮。

在搜索循环中，有时当搜索返回多个项目时，我们必须显示模态，用户选择哪个部分。

我想暂停循环并等待用户选择一个项目，然后再继续。

MY 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

定义全局变量并根据弹出的请求，将其余代码移到ChoosePopup（）函数。

Answer 2

我认为你应该重新思考你接近问题的方式。您应该使用回调激活ChoosePopup函数，以根据用户输入执行其余工作。

您可以考虑将rows数组传递给SearchItems函数，以便您可以设置回调以遍历行中的其余项。

这是一个不需要重复代码的示例。

SELECT Gender, COUNT(*) AS "Number of employees", Age
FROM Employee
WHERE year(column_name) >= 1999 --Give a real date column here
GROUP BY Age, Gender

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);

在继续循环Javascript之前等待按钮单击事件

2 个答案: