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()的原因。 Scope是您可以访问的变量，对象和函数集。范围在函数内部发生变化。就像你的回调一样，它们会变成本地的，不能在那个范围之外访问，只能在该函数中访问。这就是您无法在其他地方访问final_data的原因。在jQuery.ajax()之前分配该可变数据，您将可以全局访问它。

Answer 2

只需在Outermost函数Scope或Event处理程序回调之外声明变量。基本上，您需要确保其他方法可以访问变量final_data。这可以通过将变量放在函数外部来实现。

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

(function(){
var final_data; 
... All you code

// Function definition1

// Function definition1

// Function definition1

})();

将ajax success（）事件中的数据与同一.js文件中的其他事件处理程序一起使用

2 个答案: