在同一個.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()。 Scope是您有權訪問的一組變量，對象和函數。範圍在函數內部更改一次。就像你的回調一樣，他們然後成爲本地，並且不能訪問以外的那個範圍，只在該功能範圍內。這就是爲什麼你不能在其他地方訪問final_data。在jQuery.ajax()之前指定該可變值，您將可以在全局訪問該變量。

Answer 2

只需在外部函數Scope或Event Handler回調之外聲明該變量即可。基本上，您需要確保其他方法可以訪問變量final_data。這可以通過在函數之外放置變量來實現。

但請記住，在最外層範圍中聲明變量可能會導致創建全局變量，從而導致對象衝突。所以你可以嘗試將所有代碼包裝在一個IIFE中。

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

// Function definition1 

// Function definition1 

// Function definition1 

})();