JavaScript：结合类似的功能

Question

我有多个函数可以一遍又一遍地执行相同的操作，但具有从外部JSON文件传递的不同对象数据。 这些数据称为Data1，Data2和Data3，我已将它们声明为Data1_Data，Data2_Data和Data3_Data的变量。

我想知道如何组合这些功能，以便编写可以传入相应JSON数据对象的功能。

背景信息：因此，这些函数遍历外部JSON数据集（数量巨大），并向分配的ID显示第n条信息。 每个功能当前都分配给JSON文件中的特定数据对象，例如此处的示例：Data1，Data2和Data3。

JSfiddle可以在这里找到https://jsfiddle.net/3mL0d6Lb/

<div class="Dboxes">
<span class="Title"> Data1/Data2 </span>
    <div class="TableContainer">
        <div class="Value"> 
            <span id="Data1" class="metrics">##</span>
        </div>
    </div>
    <div class="TableContainer">
       <div class="Value"> 
       <span id="Data2" class="metrics">##</span> 
       </div>
    </div>
    <div class="TableContainer">
        <div class="Value"> 
        <span id="Data3" class="metrics">##</span> 
        </div>
     </div>

.Dboxes {
            width: 140px;
            height: 140px; 
            background: linear-gradient(#00395c 0%, #000000 50%, #00395c 100%);
            padding-top: 2px;
            padding-left: 2px;
            display: inline-block;
            margin: 0px 0px 1px 0px;
            position:relative;
            color: white;
        }

.Value
{
  text-align: center;
  font-size: 1.0vw;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}


.TableContainer
{
  display: flex;
  align-items:center;
  height: 25px;
}
.TitleImage
{
    width: 24px;
    height: 24px;
    margin-left: 5%;
}
.container {
  height: 100%; 
  width: 100%;
  display: inline-block;
}

JavaScripts

// 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);
    });
};

Answer 1

您可以对Info对象上的每个函数使用来遍历对象中的属性，而不是单独使用它。

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_#_Data和prev_Data#_Data ，其中＃表示1、2或3，请允许我详细说明...

我相信你可以通过使用替代使用这些变量data_value代替，这是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
}

这样一来，您就可以使用适合每个属性的特定代码，而无需复制周围的代码，这就是您要关注的重点。 如果您看下面的代码，这是您可以使用此实现方式执行的示例...但是请记住，我没有为您编写整个代码，因为我将最终实现方式留给您和您自己编码风格。

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....
         }
     }
 }

如果您有任何疑问，请在下面的评论中提问。 如果您的代码正常工作，并且希望对其进行优化，我强烈建议您去“代码审查”并在此处发布您的代码。