JavaScript：组合相似的函数

我有多个函数，它们一次又一次地做同样的事情，但是使用从外部JSON文件传递的不同对象数据。这些数据称为Data1、Data2和Data3，我已经将它们声明为Data1_数据、Data2_数据和Data3_数据的变量

我想知道如何组合这些函数，以便编写一个函数，传入相应的JSON数据对象

背景信息：因此函数循环通过外部JSON数据集（数量巨大），并向分配的ID显示第n个信息。每个函数当前都分配给JSON文件中的特定数据对象，如这里的示例：Data1、Data2和Data3

可以在这里找到JSFIDLE

Java脚本

// Setting up the Json 
var counter = 0; // Trial 
var previous_value = null;

$(document).ready(function () {       

  $.ajaxSetup({ cache: false });

       myJson();

    });

// Below is the function to draw data from Json        
function myJson() {

    $.getJSON("Dataset.json", function (response) {

        var i = 1380; //start demo at last hour of data.

        var looping = setInterval(function () {
        var TrialCount = response.length;
            var Info = response[counter];
            var Data1_Data = Info.Data1;
            var Data2_Data = Info.Data2;
      var Data3_Data = Info.Data3;

            CompareData1();
            CompareData2();
      CompareData3();

            function CompareData1() {
                if (counter == 0) {
                    prev_Data1_Data = Data1_Data; 
                }
                if (Data1_Data > prev_Data1_Data) {
                    if ((Math.abs(Data1_Data - prev_Data1_Data) >= prev_Data1_Data / 2 ))
                    document.getElementById("Data1_img").src = "img/yeltri.png";
                    else if ((Math.abs(Data1_Data - prev_Data1_Data) <= prev_Data1_Data / 2))
                        document.getElementById("Data1_img").src = "img/grnsqr.png";
                }
                else if (Data1_Data < prev_Data1_Data) {
                    if ((Math.abs(Data1_Data - prev_Data1_Data) >= prev_Data1_Data / 2))
                    document.getElementById("Data1_img").src = "img/yeltriDn.png";
                    else if ((Math.abs(Data1_Data - prev_Data1_Data) <= prev_Data1_Data / 2))
                        document.getElementById("Data1_img").src = "img/grnsqr.png";
                }
                prev_Data1_Data = Data1_Data;
            }

            function CompareData2() {
                if (counter == 0) {
                    prev_Data2_Data = Data2_Data;
                }
                if (Data2_Data > prev_Data2_Data) {
                    if ((Math.abs(Data2_Data - prev_Data2_Data) >= prev_Data2_Data / 2 ))
                    document.getElementById("Data2_img").src = "img/yeltri.png";
                    else if ((Math.abs(Data2_Data - prev_Data2_Data) <= prev_Data2_Data / 2))
                        document.getElementById("Data2_img").src = "img/grnsqr.png";
                }
                else if (Data2_Data < prev_Data2_Data) {
                    if ((Math.abs(Data2_Data - prev_Data2_Data) >= prev_Data2_Data / 2))
                    document.getElementById("Data2_img").src = "img/yeltriDn.png";
                    else if ((Math.abs(Data2_Data - prev_Data2_Data) <= prev_Data2_Data / 2))
                        document.getElementById("Data2_img").src = "img/grnsqr.png";
                }

                prev_Data2_Data = Data2_Data;
            }

      function CompareData3() {
                if (counter == 0) {
                    prev_Data3_Data = Data3_Data;
                }
                if (Data3_Data > prev_Data3_Data) {
                    if ((Math.abs(Data3_Data - prev_Data3_Data) >= prev_Data3_Data / 2 ))
                    document.getElementById("Data3_img").src = "img/yeltri.png";
                    else if ((Math.abs(Data3_Data - prev_Data3_Data) <= prev_Data3_Data / 2))
                        document.getElementById("Data3_img").src = "img/grnsqr.png";
                }
                else if (Data3_Data < prev_Data3_Data) {
                    if ((Math.abs(Data3_Data - prev_Data3_Data) >= prev_Data3_Data / 2))
                    document.getElementById("Data3_img").src = "img/yeltriDn.png";
                    else if ((Math.abs(Data3_Data - prev_Data3_Data) <= prev_Data3_Data / 2))
                        document.getElementById("Data3_img").src = "img/grnsqr.png";
                }

                prev_Data3_Data = Data3_Data;
            }

            document.getElementById("Data1").innerHTML = Data1_Data
            document.getElementById("Data2").innerHTML = Data2_Data
            document.getElementById("Data3").innerHTML = Data3_Data

            counter++;
            if (counter == TrialCount) clearInterval(looping);

        }, 100);
    });
};

//设置Json
变量计数器=0；//试验
var-previous_值=null；
$（文档）.ready（函数（）{
$.ajaxSetup（{cache:false}）；
myJson（）；
});
//下面是从Json中提取数据的函数
函数myJson（）{
$.getJSON（“Dataset.json”），函数（响应）{
var i=1380；//在数据的最后一个小时开始演示。
变量循环=设置间隔（函数（）{
var TrialCount=response.length；
var Info=响应[计数器]；
var Data1_Data=Info.Data1；
var Data2_Data=Info.Data2；
var Data3_Data=Info.Data3；
CompareData1（）；
CompareData2（）；
比较TA3（）；
函数CompareData1（）{
如果（计数器==0）{
prev_数据1_数据=数据1_数据；
}
如果（数据1\u数据>上一个数据1\u数据）{
if（（Math.abs（Data1_Data-prev_Data1_Data）>=prev_Data1_Data/2））
document.getElementById（“Data1_img”）.src=“img/yeltri.png”；
else if（（Math.abs（Data1_Data-prev_Data1_Data）=prev_Data1_Data/2））
document.getElementById（“Data1_img”）.src=“img/yeltriDn.png”；
else if（（Math.abs（Data1\u数据-prev\u Data1\u数据）prev\u Data2\u数据）{
if（（Math.abs（Data2_数据-prev_Data2_数据）>=prev_Data2_数据/2））
document.getElementById（“Data2_img”）.src=“img/yeltri.png”；
else if（（Math.abs（Data2_数据-prev_Data2_数据）=prev_Data2_数据/2））
document.getElementById（“Data2_img”）.src=“img/yeltriDn.png”；
else if（（Math.abs（Data2\u数据-prev\u Data2\u数据）prev\u Data3\u数据）{
if（（Math.abs（Data3_Data-prev_Data3_Data）>=prev_Data3_Data/2））
document.getElementById（“Data3_img”）.src=“img/yeltri.png”；
else if（（Math.abs（Data3_数据-prev_Data3_数据）=prev_Data3_数据/2））
document.getElementById（“Data3_img”）.src=“img/yeltriDn.png”；
else if（（Math.abs（Data3_Data-prev_Data3_Data）您可以使用
信息
对象上的循环遍历其中的属性，而不是单独使用它

CompareData(Info);

for(data in Info){
    if (Info.hasOwnProperty(data)) {
        CompareData(data, info[data]);
    }
}

function CompareData(data, data_value){
    // Modify your code here
}

我之所以在
CompareData
函数上留下评论，是因为您当前正在使用以下变量：
Data#u Data
和
prev#u Data#u Data
，其中#表示1、2或3，请允许我详细说明

我相信您可以使用
data\u值来代替这些变量的使用，即
info[data]
。因此，通过使用我提供的代码，在
CompareData
函数中，我们可以使用传入的对象属性
data
，为简单起见，该属性现在命名为
data
，以确定我们正在处理哪些数据（1、2或3）

我还通过
info[data]
传递了这个属性的值，这样我们就不必在函数本身中担心它了……您可以随时更改它

因此，现在您在函数中有了相关信息，您只需做一个简单的检查：
if（data==“Data1”）
来检查您正在处理哪些数据。实现它的方法如下：

if(data === "Data1"){
    // ... some code before
    document.getElementById("Data1_img").src = "img/grnsqr.png";
    // ... some code after
}

这将允许您使用针对每个属性的特定代码，而无需重复您关心的周围代码。如果您查看下面的代码，这是您可以使用此实现执行的示例…但请记住，我不是为您编写整个代码，因为我将离开最终实现n取决于您和您自己的编码风格

function CompareData(data, data_value){
     var prev_data = 0;

     if (counter == 0) {
         prev_data = data_value; 
     }

     if (data_value > prev_data) {
         if ((Math.abs(data_value - prev_data) >= prev_data / 2 ))
             if(data === "Data1"){
                document.getElementById("Data1_img").src = "img/yeltri.png";
             }
             else if(data === "Data2"){
                document.getElementById("Data1_img").src = "img/yeltri.png";
             }
             // ... Etcetera....
         }
     }
 }

如果您有任何问题，请随时在下面的评论中提问。如果您的代码正在运行，并且希望对其进行优化，我强烈建议您转到并将代码发布到那里。
我不知道您在哪里声明了诸如
prev\u Data1\u Data
之类的变量。它们是全局变量吗？在每个函数的末尾，我声明了prev\u Data1\u Data by指向数据1_Data，这不是好的做法。如果在函数
CompareData1
中的第一个条件下
counter
将不等于
0
，那么在随后的条件下
if（数据1_Data>prev_Data1_Data）{
它将比较
Data1_Data
和未声明的变量
prev_Data1_Data
。我可以很容易地帮助您，并为您提供组合优化的函数，但我希望您以适当的方式准备变量。我决定以更解释的方式提供答案，因为我相信@axchink可以找到自己的角色优化代码的一种方法，这就是它的目的
if(data === "Data1"){
    // ... some code before
    document.getElementById("Data1_img").src = "img/grnsqr.png";
    // ... some code after
}

function CompareData(data, data_value){
     var prev_data = 0;

     if (counter == 0) {
         prev_data = data_value; 
     }

     if (data_value > prev_data) {
         if ((Math.abs(data_value - prev_data) >= prev_data / 2 ))
             if(data === "Data1"){
                document.getElementById("Data1_img").src = "img/yeltri.png";
             }
             else if(data === "Data2"){
                document.getElementById("Data1_img").src = "img/yeltri.png";
             }
             // ... Etcetera....
         }
     }
 }