我也是JavaScript和后端编码的新手。启动计数器我需要帮助。 我在下面写的代码做了以下事情。
我想要做的是，当前值小于或大于前一个值时，它应该改变背景颜色并启动一个名为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（）＆＃39; s 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);
但我不确定，请帮忙
答案 0 :(得分：1)
问题根本不清楚，特别是逻辑。原始代码使用10毫秒的采样率，但需要10秒的重置计时器。因此，为了测试这一点，我们需要生成一个包含数千条记录且至少有1000条匹配记录的数据集来触发重置。
下面的示例尝试将代码分解为数据，计时器和UI函数，以使其更易于管理。然而，OP只需要关注作为控制逻辑的定时器部分。根据要求，不匹配的记录会触发UI更改。在连续匹配记录（+1000条记录）10秒之后，UI才会重置为原始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);
};