JavaScript:计数器和 IF/Else

Question

我对 JavaScript 和后端编码也很陌生。我需要启动计数器的帮助。我在下面编写的代码执行以下操作。

1. 循环访问具有一组对象(数字)的外部 JSON 文件，并将其先前值与当前值进行比较
2. 如果当前值小于或大于先前值，则会更改图像

我想要做的是，当当前值小于或大于前一个值时，它应该更改背景颜色并启动一个名为 counterAlert 的计数器。此计数器应计数最多 10 秒并将背景颜色更改回原始颜色，但是在这 10 秒时间范围内，该函数应继续循环 JSON 文件，如果它再次达到当前值的条件，则更大小于或小于先前的值，计数器应重置。

我必须循环遍历 JSON 文件的 JavaScript 代码如下

var counter = 0; // Trial 
var counterAlert = 0

$(document).ready(function () {       

  $.ajaxSetup({ cache: false });

       myJson();

    });

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

    $.getJSON("Janus.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 Checker_Data = Info.WOB;

            Checker_Data = Checker_Data.toFixed(2);

            CompareChecker();

            function CompareChecker() {
                if (counter == 0) {
                    prev_Checker_Data = Checker_Data;
                }

                if (Checker_Data > prev_Checker_Data) {
                    if ((Math.abs(Checker_Data - prev_Checker_Data) >= prev_Checker_Data / 2 ))
                    document.getElementById("Checker_img").src = "img/yeltri.png",
                    document.getElementById("CheckerValue").style.backgroundColor = '#006699';

                    else if ((Math.abs(Checker_Data - prev_Checker_Data) <= prev_Checker_Data / 2))
                        document.getElementById("Checker_img").src = "img/grnsqr.png";
                }

                else if (Checker_Data < prev_Checker_Data) {
                    if ((Math.abs(Checker_Data - prev_Checker_Data) >= prev_Checker_Data / 2))
                    document.getElementById("Checker_img").src = "img/yeltriDn.png";
                    else if ((Math.abs(Checker_Data - prev_Checker_Data) <= prev_Checker_Data / 2))
                        document.getElementById("Checker_img").src = "img/grnsqr.png";
                }

                prev_Checker_Data = Checker_Data;
            }

            document.getElementById("Checker").innerHTML = Checker_Data


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


        }, 10);
    });
};

我在想，要做我想做的事，我需要在函数 CompareChecker() 的 If 语句下插入另一个函数，这样

    if (Checker_Data > prev_Checker_Data) {
    if ((Math.abs(Checker_Data - prev_Checker_Data) >= prev_Checker_Data / 2 ))
    document.getElementById("Checker_img").src = "img/yeltri.png",
    document.getElementById("CheckerValue").style.backgroundColor = '#006699',
checkerValue_Timer();
    function checkerValue_Timer(){
    counterAlert++;
     if (counterAlert == 10)
     document.getElementById("CheckerValue").style.backgroundColor = '#cecece';
}
setInterval(CheckerValue_Timer, 1000);

但我不确定，请帮忙

Answer 1

问题根本不清楚，尤其是逻辑。原始代码使用 10 毫秒的采样率，但需要 10 秒的重置计时器。因此，为了测试这一点，我们需要生成一个包含数千条记录的数据集，并且至少有 1000 条匹配记录来触发重置。

下面的示例尝试将代码分解为数据、计时器和 UI 函数，以使其更易于管理。然而，OP只需要关注作为控制逻辑的计时器部分。根据要求，不匹配的记录会触发 UI 更改。直到有 10 秒的连续匹配记录(+1000 条记录)后，UI 才会重置为原始状态。

要进行测试，请单击“显示代码片段”链接，然后单击蓝色按钮“运行代码片段”

更新:修改代码，以便通过类名切换图像。这比在原始代码中重复设置图像 src 更有效，即它避免了无关的服务器请求。

(function() {

  var DEBUG = true, // false = use json data, true = auto generate data
    DATA_URL = 'janus.json',
    IMAGE_URL = 'https://cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons32x32/',
    INTERVAL = 10,
    TIMEOUT = 10000,
    counter, timerId, response, timerAlert;


  // initialize
  $('#button1').click(function() {
    getData(function(data) {
      response = data;
      startTimer();
    });
  });
  $('#button1').click();


  function startTimer() {

    // reset
    counter = 0;
    timerAlert = 0;
    if (timerId) clearInterval(timerId);

    // start 
    timerId = setInterval(function() {
      counter++;
      if (counter >= response.length - 1) clearInterval(timerId);
      if (parseFloat(response[counter].WOB) != parseFloat(response[counter - 1].WOB)) {
        timerAlert = 0;
        updateUI(false);
      } else {
        timerAlert += INTERVAL;
        if (timerAlert > TIMEOUT) timerAlert = TIMEOUT;
        updateUI(timerAlert >= TIMEOUT);
      }
    }, INTERVAL);
  };



  function updateUI(bOriginal) {
    $('#CheckerValue').css('background-color', (bOriginal ? 'LightGray' : 'SeaGreen'));
    
    
    // $('#Checker_img').attr('src', IMAGE_URL + (bOriginal ? 'status_offline.png' : 'status_online.png'));
    $('#Checker_img').attr('class', 'icon ' + (bOriginal ? 'offline' : 'online'));
    
    
    $('#Checker').html(parseFloat(response[counter].WOB).toFixed(2));
    $('#counter').html(counter);
    $('#timerAlert').html((timerAlert / 1000).toFixed(2) + ' seconds');
    $('#Time').html((new Date()).toLocaleTimeString());
  }


  // get data from server or generate test data when debug true
  function getData(callback) {

    if (!DEBUG) {
      $.ajaxSetup({
        cache: false
      });
      $.getJSON(DATA_URL, callback);
    } else {
      var i, data = [];
      for (i = 0; i < 2500; i++) data.push({
        WOB: (i < 20 ? 100 : i == 1200 ? 100 : 200)
      });
      callback(data);
    }

  }

})();

table {
  border-collapse: collapse;
  width: 400px;
  
  font-family: sans-serif;
  font-size: 14px;
}
td {
  white-space: nowrap;
  padding: 2px;
  border: 1px steelblue solid;
}

.icon {
  background-repeat: no-repeat;
  width: 32px;
  height: 32px;
}
.icon.online {
  background-image: url(https://cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons32x32/status_online.png);
}

.icon.offline {
   background-image: url(https://cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons32x32/status_offline.png);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div>
  <button id="button1">Start</button>
  <table>
    <tr>
      <td>Checker_Img</td>
      <td id="Checker_img" class="icon offline">
        
      </td>
    </tr>
    <tr>
      <td>CheckerValue</td>
      <td id="CheckerValue"></td>
    </tr>
    <tr>
      <td>Checker</td>
      <td id="Checker">0</td>
    </tr>
    <tr>
      <td>counter</td>
      <td id="counter">0</td>
    </tr>
    <tr>
      <td>timerAlert</td>
      <td id="timerAlert"></td>
    </tr>
    <tr>
      <td>Time</td>
      <td id="Time"></td>
    </tr>
  </table>
  
  
  

计时器逻辑:

  function startTimer() {

    // reset
    counter = 0;
    timerAlert = 0;
    if (timerId) clearInterval(timerId);

    // start 
    timerId = setInterval(function() {
      counter++;
      if (counter >= response.length - 1) clearInterval(timerId);
      if (parseFloat(response[counter].WOB) != parseFloat(response[counter - 1].WOB)) {
        timerAlert = 0;
        updateUI(false);
      } else {
        timerAlert += INTERVAL;
        if (timerAlert > TIMEOUT) timerAlert = TIMEOUT;
        updateUI(timerAlert >= TIMEOUT);
      }
    }, INTERVAL);
  };