javascript - 封闭函数的封闭函数退出后调用 jquery (getJSON)

Question

我正在通过另一个函数调用函数中的一些jquery，该函数本身在按下按钮时调用。结果发现，直到原来的调用函数退出后，jquery对服务器的请求才被执行。效果是，添加的按钮最终被我期望在添加按钮之前运行的代码删除(该代码包含一个empty()命令)。请看一看。这里发生了什么？

function get_user_from_database() {
  var user_name_search_string = $("#user_name_search_string").val();
  $.getJSON($SCRIPT_ROOT + '/get_user_for_admin_purposes', {
    user_name_search_string: user_name_search_string
  }, function(data) {
    var userNode = $("#list_of_users");
    userNode.empty();
    for (var i = 0; i < data.users.length; i++) {
      var cb = document.createElement("input");
      cb.type = "radio";
      cb.value = data.users[i].user_ID;
      cb.checked = false;
      cb.name = "selected_user";
      userNode[0].appendChild(cb);
      var theTxt = document.createTextNode(data.users[i].user_name);
      userNode[0].appendChild(theTxt);
      var br = document.createElement("br");
      userNode[0].appendChild(br);
      var theTxt = document.createTextNode("Date joined : " + data.users[i].date_joined);
      userNode[0].appendChild(theTxt);
      var br = document.createElement("br");
      userNode[0].appendChild(br);
      var theTxt = document.createTextNode("User Role : " + data.users[i].role);
      userNode[0].appendChild(theTxt);
      var br = document.createElement("br");
      userNode[0].appendChild(br);
      var theTxt = document.createTextNode("User Email : " + data.users[i].email);
      userNode[0].appendChild(theTxt);
      var p = document.createElement("p");
      userNode[0].appendChild(p);
    }
  });
}


$(function() {
  $('#user_name_search_button_assign_moderator').on('click', function(e) {
    get_user_from_database();
    var userNode = $("#list_of_users");
    var aButton = document.createElement("input");
    aButton.type = "submit";
    aButton.value = "Assign Moderator Status";
    aButton.id = "assign_mod_status_button"
    userNode[0].appendChild(aButton);
  });
});

Answer 1

function get_user_from_database(callback) {
  var user_name_search_string = $("#user_name_search_string").val();
  $.getJSON($SCRIPT_ROOT + '/get_user_for_admin_purposes', {
    user_name_search_string: user_name_search_string
  }, function(data) {
    var userNode = $("#list_of_users");
    userNode.empty();
    for (var i = 0; i < data.users.length; i++) {
      var cb = document.createElement("input");
      cb.type = "radio";
      cb.value = data.users[i].user_ID;
      cb.checked = false;
      cb.name = "selected_user";
      userNode[0].appendChild(cb);
      var theTxt = document.createTextNode(data.users[i].user_name);
      userNode[0].appendChild(theTxt);
      var br = document.createElement("br");
      userNode[0].appendChild(br);
      var theTxt = document.createTextNode("Date joined : " + data.users[i].date_joined);
      userNode[0].appendChild(theTxt);
      var br = document.createElement("br");
      userNode[0].appendChild(br);
      var theTxt = document.createTextNode("User Role : " + data.users[i].role);
      userNode[0].appendChild(theTxt);
      var br = document.createElement("br");
      userNode[0].appendChild(br);
      var theTxt = document.createTextNode("User Email : " + data.users[i].email);
      userNode[0].appendChild(theTxt);
      var p = document.createElement("p");
      userNode[0].appendChild(p);
    }

    callback();
  });
}


$(function() {
  $('#user_name_search_button_assign_moderator').on('click', function(e) {
    get_user_from_database(function() {
      var userNode = $("#list_of_users");
      var aButton = document.createElement("input");
      aButton.type = "submit";
      aButton.value = "Assign Moderator Status";
      aButton.id = "assign_mod_status_button"
      userNode[0].appendChild(aButton);
    });
  });
});