使用来自同一.js文件中其他事件处理程序的Ajax Success()事件中的数据

Question

我有一个"提交"按钮，并附加了使用jQuery/ajax的事件处理程序。成功函数的数据来自烧瓶视图：

$('input[type=submit]').click(function() {
  var final_data;    //tried defining here
  var input_ID = $("#input_ID").val();
  var Node_Type = $("#Node_Type").val();
  $.ajax({
    type: "POST",
    url: "/",
    dataType: 'json',
    data: {
      input_ID: input_ID,
      Node_Type: Node_Type,
    },
    success: function(data) {
      var IDData = JSON.stringify(data);
      console.log(IDData);
      var galData = JSON.parse(IDData);
      var startnodes = [];
      var endnodes = [];
      var startnodetype = [];
      var endnodetype = [];
      var SendTime = [];
      var PayTime = [];
      var Total_Amt = [];
      var Depth = [];
      galData.map(function(e, i) {
        startnodes.push(e[0]);
        endnodes.push(e[1]);
        startnodetype.push(e[2]);
        endnodetype.push(e[3]);
        SendTime.push(e[4]);
        PayTime.push(e[5]);
        Total_Amt.push(e[6]);
        Depth.push(e[7]);
      });
      var final_data = createNodes(startnodes, endnodes, startnodetype, endnodetype, SendTime, PayTime, Total_Amt, Depth);
      makeGraph("#Network_graph", final_data);
    }
  });
  return false;
});

createNodes() and makeGraph()

函数正常工作，并且两个功能都与事件处理程序相同的.js文件。

我想使用

var final_data

在其他事件中，同一.js文件中的处理程序。

      var filtered_data = [];
var myBtn = document.getElementById("depth");
if (myBtn) {
  myBtn.addEventListener("click", function() {
    var nodes = [];
    var links = [];
    var e = document.getElementById("select_ID");
    var strUser = e.options[e.selectedIndex].value;
    console.log(strUser);
    d3.selectAll("line").filter(function(d, i) {
      if (d.depth <= strUser) {
        if (isUnique(d.source.id, nodes)) {
          nodes.push(d.source);
        }
        if (isUnique(d.target.id, nodes)) {
          nodes.push(d.target);
        }
        links.push(d);
      }
    });
    filtered_data.links = links;
    filtered_data.nodes = nodes;
    filtered_data.nodetype = final_data.nodetype;
    d3.select('#Network_graph').selectAll("*").remove();
    makeGraph("#Network_graph", filtered_data);
  });
}
var fullBtn = document.getElementById("full_data");
if (fullBtn) {
  fullBtn.addEventListener("click", function() {
    d3.select('#Network_graph').selectAll("*").remove();
    makeGraph("#Network_graph", final_data);
  });
}

失败：

     Uncaught ReferenceError: final_data is not defined
at HTMLButtonElement.<anonymous>

Answer 1

在JavaScript中，对象和函数也是变量。这就是为什么您能够在回调之外访问createNodes()和makeGraph()的原因。范围是您可以访问的变量，对象和功能的集合。范围在功能内部发生变化。像您的回调一样，它们将成为本地，并且不能在范围之外访问，只有在该功能内。这就是为什么您无法在其他任何地方访问final_data的原因。在jQuery.ajax()之前分配该差异，您将可以在全球范围内访问它。

Answer 2

只需在事件处理程序回调的最外部函数范围或外部声明变量即可。基本上，您需要确保其他方法可访问可变的final_data。这可以通过将变量放置在功能之外来实现。

，但请记住，在最外面的范围内声明变量可能会导致创建全局变量，从而导致对象碰撞。因此，您可以尝试将所有代码包装在IIFE中。

(function(){
var final_data; 
... All you code
// Function definition1
// Function definition1
// Function definition1
})();