为什么我的程序同时执行 if 和 else？

Question

我的程序以一种非常奇怪的方式响应。当我单击按钮并调用 selectService() 时，它会正确处理，但最后的 if/else 语句表现得很奇怪，因为它显示了 if 和 else 部分的消息。有时它会显示旧消息，然后显示新消息。

var i = 0;

function selectService() {
  $("#tblServices tr").filter(':has(:checkbox:checked)').each(function() {
    //i = 1; // to check if the looping has been done or not
    //alert(i);

    var url = '@Url.Action("CreateInvoice")';
    var data = {
      fk_BookingID: $("#Booking_ID").val(),
      fk_ServiceID: $("td:eq(0)", this).text()
    }

    $.post(url, data, function(response) {
      if (response.ReturnStatusJSON === true) {
        alert(response.ReturnStatusJSON);
        return true;
      } else {
        swal("Sorry !", response.ReturnMessageJSON, "error");
        return false;
      }
    });

    i = 1;
  });

  if (i === 0) {
    swal("Sorry !", "You must select at least one service", "error");
    return;
  }

  if (i > 0) {
    var url2 = '@Url.Action("UpdateBookingInvoiceGeneration")';
    var data2 = {
      Booking_ID: $("#Booking_ID").val()
    }

    $.post(url2, data2, function(response) {
      if (response.ReturnStatusJSON === true) {
        swal("Done", response.ReturnMessageJSON, "success");
        $('.selectColumn').prop("checked", false);
        return;
      } else {
        swal("Sorry !", response.ReturnMessageJSON, "error");
      }
    });
  }
}

发生了什么事？为什么它会这样？我使用的是最新版本的 Chrome。

更新：

我在调试时看到了一个非常不同的问题。我在表中选择了 3 个复选框，每个循环 应该至少运行 3 次，但一开始它运行了 2 次并跳转到 if(i>0)，执行完后又跳到 select services 函数并运行第三次检查，剩下的一个。

Answer 1

我想我有点理解你想要做什么，并且使用变量来检查 .each 中的块是否已被执行是不好的做法。使用同步请求也是如此。

这里有一个建议，希望对你有帮助

function selectService() {

    // First, manage the case where the user didn't select a service
    if ($("#tblServices tr").filter(':has(:checkbox:checked)') === null) { // or check array length
        swal("Sorry !", "You must select at least one service", "error");
        return;
    }

    // Then, if he has
  $("#tblServices tr").filter(':has(:checkbox:checked)').each(function() {
    var url = '@Url.Action("CreateInvoice")';
    var data = {
      fk_BookingID: $("#Booking_ID").val(),
      fk_ServiceID: $("td:eq(0)", this).text()
    }

    // Do your first request
    $.post(url, data, function(response) {
      if (response.ReturnStatusJSON === true) {
        alert(response.ReturnStatusJSON);

        var url2 = '@Url.Action("UpdateBookingInvoiceGeneration")';
        var data2 = {
          Booking_ID: $("#Booking_ID").val()
        }
    
        // Still in the callback, do the second one if you want it done AFTER
        // getting the result for the first one
        $.post(url2, data2, function(response) {
          if (response.ReturnStatusJSON === true) {
            swal("Done", response.ReturnMessageJSON, "success");
            $('.selectColumn').prop("checked", false);
            return;
          } else {
            swal("Sorry !", response.ReturnMessageJSON, "error");
          }
        });

        return true;
      } else {
        swal("Sorry !", response.ReturnMessageJSON, "error");
        return false;
      }
    });

  });

}