为什么我的代码在使用 AJAX 时会进入无限循环？

Question

我正在使用这两个函数尝试将客户和订单添加到我的数据库中。我遇到的问题是我想执行 add customer，然后执行 addOrder 但是当我这样尝试时，它进入了无限循环。

function addCustomer(){
  customer = localStorage.getItem('customer');
  jsonCustomer = JSON.parse(customer);

  var xmlhttp = new XMLHttpRequest();

  if(xmlhttp){
    xmlhttp.onreadystatechange = function(){
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        response = JSON.parse(xmlhttp.responseText);

        customerID = response[0].ID;
        customerFirstName = response[0].FirstName;
        customerSurname = response[0].LastName;
        customerEmail = response[0].Email;
        customerPhoneNumber = response[0].PhoneNumber;
        customerAddress = response[0].Address;
        customerTowm = response[0].Town;
        customerCounty = response[0].County;
        customerPostCode = response[0].PostCode;

        details = "<p>ID: " + customerID + "</p>" + "<p>First Name: " + customerFirstName + "</p>" + "<p>Surname: " + customerSurname + "</p>" + "<p>Email: " + customerEmail + "</p>" + "<p>Phone Number: " + customerPhoneNumber + "</p>" + "<p>Address: " + customerAddress + "</p>" +
                  "<p>Town: " +  + "</p>" + "<p>County: " + customerCounty + "</p>" + "<p>Post Code: " + customerPostCode + "</p>";
        Alert.render("Customer Added", details);

      }
    }
  var url = "addCustomer.php?firstName=" + jsonCustomer.FirstName + "&surname=" + jsonCustomer.Surname + "&email=" + jsonCustomer.Email + "&phoneNumber=" + jsonCustomer.PhoneNumber + "&address=" + jsonCustomer.Address + "&town=" + jsonCustomer.Town + "&county=" + jsonCustomer.County + "&postCode=" + jsonCustomer.PostCode;
  xmlhttp.open("GET", url, false);
  xmlhttp.send();

  addOrder(customerID);

  }
}


function addOrder(customerID){
  customerID = addCustomer();
  var xmlhttp = new XMLHttpRequest();


  if(xmlhttp){
    xmlhttp.onreadystatechange = function(){
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        console.log(xmlhttp.responseText);

        response = JSON.parse(xmlhttp.responseText);

        orderID = response[0].ID;
        orderDate = response[0].Date;
        orderPrice = response[0].TotalPrice;
        orderCustomerID = response[0].Customer_ID;


        details = "<p>ID: " + orderID + "</p>" + "<p>Date: " + orderDate + "</p>" + "<p>Total Price: " + orderPrice + "</p>" + "<p>Customer ID: " + orderCustomerID + "</p>";
        Alert.render("Customer Added", details);


      }
    }

    var url = "../Administration/Checkout/addOrder.php?customerID=" + customerID + "&totalPrice=" + totalPrice;
    xmlhttp.open("GET", url, false);
    xmlhttp.send();

  }
}

Answer 1

addCustomer 总是会在 addCustomer.

addOrder

XMLHttpRequest

addOrder 将始终调用 addCustomer（在它的第一行）。

您需要一个条件来阻止其中一个调用的发生以避免无限循环。

Answer 2

您有 addCustomer() 调用 addOrder，它在第一行再次调用 addCustomer，这就是无限调用的原因。

由于addOrder方法需要addCustomerajax调用返回的customerId，所以需要在addCustomer 成功，可以将 customerId 作为婴儿车传递给 addOrder 方法。

function addCustomer() {
    customer = localStorage.getItem('customer');
    jsonCustomer = JSON.parse(customer);

    var xmlhttp = new XMLHttpRequest();

    if (xmlhttp) {
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var response = JSON.parse(xmlhttp.responseText);

                customerID = response[0].ID;
                customerFirstName = response[0].FirstName;
                customerSurname = response[0].LastName;
                customerEmail = response[0].Email;
                customerPhoneNumber = response[0].PhoneNumber;
                customerAddress = response[0].Address;
                customerTowm = response[0].Town;
                customerCounty = response[0].County;
                customerPostCode = response[0].PostCode;

                details = "<p>ID: " + customerID + "</p>" + "<p>First Name: " + customerFirstName + "</p>" + "<p>Surname: " + customerSurname + "</p>" + "<p>Email: " + customerEmail + "</p>" + "<p>Phone Number: " + customerPhoneNumber + "</p>" + "<p>Address: " + customerAddress + "</p>" +
                    "<p>Town: " + +"</p>" + "<p>County: " + customerCounty + "</p>" + "<p>Post Code: " + customerPostCode + "</p>";
                Alert.render("Customer Added", details);

                //need to call it after the addCustomer is finished
                addOrder(customerID);

            }
        }
        var url = "addCustomer.php?firstName=" + jsonCustomer.FirstName + "&surname=" + jsonCustomer.Surname + "&email=" + jsonCustomer.Email + "&phoneNumber=" + jsonCustomer.PhoneNumber + "&address=" + jsonCustomer.Address + "&town=" + jsonCustomer.Town + "&county=" + jsonCustomer.County + "&postCode=" + jsonCustomer.PostCode;
        xmlhttp.open("GET", url, false);
        xmlhttp.send();
    }
}


function addOrder(customerID) {
    var xmlhttp = new XMLHttpRequest();


    if (xmlhttp) {
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                console.log(xmlhttp.responseText);

                response = JSON.parse(xmlhttp.responseText);

                orderID = response[0].ID;
                orderDate = response[0].Date;
                orderPrice = response[0].TotalPrice;
                orderCustomerID = response[0].Customer_ID;


                details = "<p>ID: " + orderID + "</p>" + "<p>Date: " + orderDate + "</p>" + "<p>Total Price: " + orderPrice + "</p>" + "<p>Customer ID: " + orderCustomerID + "</p>";
                Alert.render("Customer Added", details);


            }
        }

        var url = "../Administration/Checkout/addOrder.php?customerID=" + customerID + "&totalPrice=" + totalPrice;
        xmlhttp.open("GET", url, false);
        xmlhttp.send();

    }
}

为什么我的代码在使用 AJAX 时会进入无限循环？

Why is my code entering an infinite loop when using AJAX?

javascript

ajax

infinite-loop