回调 function 未定义，即使它在调用 javascript 之前已经定义

Question

I am using for loop get all the data place in a div. I have following code in javascript so far:

<script type="text/javascript">
function callback(){
    $.getScript("/frontend/vendor/jquery/jquery.min.js", function() {
      $('input').on('change', function(){
        var qty = $(this).attr('id');
        var price = $('#'+qty+'_price').attr('value');
        var subtotal = qty * price;
        $('#'+qty+'_total').html('&euro; '+subtotal);
      })
    });
  }

  function checkout(callback){
    let eventDate = JSON.parse(localStorage.getItem("events"));
    var unique = eventDate.filter(function(itm, i, eventDate) {
        return i == eventDate.indexOf(itm);
    });
    let items = [];
    for (var n = 0; n < unique.length; n++){
        var eventId = unique[n];
        $.ajax({
            "url":"/get_my_product/"+ eventId,
            "type":"GET",
            "dataType":"json",
            "contentType":"application/json",
            success:function(response){
              let party = 'Party name';
              let html = "<tr class='product-row'><td class='product-col'><h5 class='product-title'><a>"+party+"</a></h5></td><td class='product-col'><h5 class='product-title'><a>"+response.date+"</a></h5></td><td value='"+response.price+"' id='"+n+"_price'>&euro; "+response.price+"</td><td><div class='input-group'><input class='vertical-quantity form-control dataqty'  id='"+n+"' type='number'><span class='input-group-btn-vertical'></span></div></td><td id='"+n+"_total'>&euro; "+response.price+"</td></tr>";
              $('#data').append(html);
            }
        })

    }
    callback && callback();
  }
  checkout();    
</script>

When I am trying to call the function after the loop completion it does not work. What is wrong here?

Answer 1

Change

function checkout(callback){

to

function checkout() {

I think the argument callback to the function checkout "shadows" the previously defined callback function. Then, when you call the function checkout you are passing nothing to the function, and callback will be undefined .

Or, in the last line, pass the function as an argument:

checkout(callback);

Answer 2

Makes no sense to add another version of jQuery to add events. You are not passing the callback to the method so it is always going to be undefined. And you are not waiting for the Ajax calls to complete before calling the callback.

// No reason for loading the JQuery version here
function addMyEvents() {
  $('input').on('change', function() {
    var qty = $(this).attr('id');
    var price = $('#' + qty + '_price').attr('value');
    var subtotal = qty * price;
    $('#' + qty + '_total').html('€ ' + subtotal);
  })
}

function checkout(callback) {
  // hold the ajax calls
  const myAjaxCalls = []
  let eventDate = JSON.parse(localStorage.getItem("events"));
  var unique = eventDate.filter(function(itm, i, eventDate) {
    return i == eventDate.indexOf(itm);
  });
  let items = [];
  for (var n = 0; n < unique.length; n++) {
    var eventId = unique[n];
    // push the ajax calls to an array
    myAjaxCalls.push($.ajax({
      "url": "/get_my_product/" + eventId,
      "type": "GET",
      "dataType": "json",
      "contentType": "application/json",
      success: function(response) {
        let party = 'Party name';
        let html = "<tr class='product-row'><td class='product-col'><h5 class='product-title'><a>" + party + "</a></h5></td><td class='product-col'><h5 class='product-title'><a>" + response.date + "</a></h5></td><td value='" + response.price + "' id='" + n + "_price'>&euro; " + response.price + "</td><td><div class='input-group'><input class='vertical-quantity form-control dataqty'  id='" + n + "' type='number'><span class='input-group-btn-vertical'></span></div></td><td id='" + n + "_total'>&euro; " + response.price + "</td></tr>";
        $('#data').append(html);
      }
    }))

  }
  // if we have a callback
  if (callback) {
    // wait for all the ajax calls to be done
    $.when.apply($, myAjaxCalls).done(callback)
  }
}
// pass the function to the method.
checkout(addMyEvents);

Now the best part is you do not even need to worry about the callback to bind events. You can just use event delegation and it would work. This way whenever an input is added to the page, it will be picked up.

$(document).on('change', 'input', function() {
    var qty = $(this).attr('id');
    var price = $('#' + qty + '_price').attr('value');
    var subtotal = qty * price;
    $('#' + qty + '_total').html('€ ' + subtotal);
})

function checkout() {
  let eventDate = JSON.parse(localStorage.getItem("events"));
  var unique = eventDate.filter(function(itm, i, eventDate) {
    return i == eventDate.indexOf(itm);
  });
  let items = [];
  for (var n = 0; n < unique.length; n++) {
    var eventId = unique[n];
    $.ajax({
      "url": "/get_my_product/" + eventId,
      "type": "GET",
      "dataType": "json",
      "contentType": "application/json",
      success: function(response) {
        let party = 'Party name';
        let html = "<tr class='product-row'><td class='product-col'><h5 class='product-title'><a>" + party + "</a></h5></td><td class='product-col'><h5 class='product-title'><a>" + response.date + "</a></h5></td><td value='" + response.price + "' id='" + n + "_price'>&euro; " + response.price + "</td><td><div class='input-group'><input class='vertical-quantity form-control dataqty'  id='" + n + "' type='number'><span class='input-group-btn-vertical'></span></div></td><td id='" + n + "_total'>&euro; " + response.price + "</td></tr>";
        $('#data').append(html);
      }
    })
  }
}

checkout();