我需要您的一些帮助或建议，以修复或更改我的js脚本。 问题是，当我单击某些按钮来更改json文件时（此文件位于setinterval函数中，以1分1秒运行），请求成倍增加，目标是仅使setinterval在单击时选择的最后一个文件中。 我创建了一个临时解决方案，但是我知道那是不正确的。因此，我正在编写此线程。 我发现停止循环的解决方案是在setinterval之前放置clearInterval（reload）函数，但是那是错误的，因为reload var在clearInterval之后运行。
我在这里放了我的剧本。也许有人可以帮助您找到解决方案以停止循环。
脚本：temp
https://jsfiddle.net/hj0dp7ng/function drawHighchart(timeFramUrl) {
$.ajax({url: timeFramUrl, success: function(data){
var currentValue = (data[data.length - 1][1]);
Highcharts.chart('container', {
chart: {
zoomType: 'x',
events: {
load: function() {
var series = this.series[0];
var chart = this;
var yAxis = chart.yAxis[0],
plotLine,
d,
newY;
yAxis.addPlotLine({
value: currentValue,
color: 'green',
width: 2,
zIndex: 5,
id: 'plot-line-1',
label: {
text: currentValue + 'EUR',
align: 'left',
style: {
color: 'green',
},
y: -4,
x: 0
}
});
// Is this correct ????
// Stop loop when click in buttons <min> , <hour> , <day> or <forever>
//clearInterval(reload);
reload = setInterval(function() {
$.getJSON(timeFramUrl, function(recData) {
var currentValue = (recData[recData.length - 1][1]);
var currenttime = (recData[recData.length - 1][0]);
series.setData(recData);
var x = currenttime,
y = currentValue;
series.addPoint([x, y], true, true);
plotLine = yAxis.plotLinesAndBands[0].svgElem;
d = plotLine.d.split(' ');
newY = yAxis.toPixels(y) - d[2];
plotlabel = yAxis.plotLinesAndBands[0].label;
plotlabel.animate({
translateY: newY,
text: Highcharts.numberFormat(y, 2)
}, {
duration: 400,
step: function() {
$(this.element).html(y + 'EUR');
},
complete: function() { }
}),
plotLine.animate({
translateY: newY
}, 400);
});
}, 1000);
}
}
},
title: { text: ''},
exporting: { enabled: false },
credits: { enabled: false },
xAxis: { type: 'datetime'},
yAxis: { opposite: true,
labels: {
align: 'left',
},
gridLineWidth: 0,
title: {
text: 'Exchange rate'
},
},
plotOptions: {
areaspline: {
marker: {
enabled: false
}
}
},
series: [{
name: 'Exchange BTC to EUR',
data: data,
type: 'areaspline',
threshold: null,
animation: true,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: { x1: 5, y1: 0, x2: 0, y2: 0
},
stops: [ [0, Highcharts.getOptions().colors[0]], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] ]
}
}]
});
}});
}
$(document).ready(function() {
var selectedTimeFrameUrl = null;
var srcURL = $("#hour").data( "url" );
drawHighchart(srcURL);
$("#min, #hour, #day, #forever").click(function(){
var srcURL = $(this).data( "url" );
drawHighchart(srcURL);
});
});
答案 0 :(得分：0)
尝试此操作，我只向所有按钮及其下方的功能添加class="stop_button"
$(".stop_button").click(function(){
clearInterval(reload);
});
function drawHighchart(timeFramUrl) {
$.ajax({url: timeFramUrl, success: function(data){
var currentValue = (data[data.length - 1][1]);
Highcharts.chart('container', {
chart: {
zoomType: 'x',
events: {
load: function() {
var series = this.series[0];
var chart = this;
var yAxis = chart.yAxis[0],
plotLine,
d,
newY;
yAxis.addPlotLine({
value: currentValue,
color: 'green',
width: 2,
zIndex: 5,
id: 'plot-line-1',
label: {
text: currentValue + 'EUR',
align: 'left',
style: {
color: 'green',
},
y: -4,
x: 0
}
});
// Is this correct ????
// Stop loop when click in buttons <min> , <hour> , <day> or <forever>
//clearInterval(reload);
reload = setInterval(function() {
$.getJSON(timeFramUrl, function(recData) {
var currentValue = (recData[recData.length - 1][1]);
var currenttime = (recData[recData.length - 1][0]);
series.setData(recData);
var x = currenttime,
y = currentValue;
series.addPoint([x, y], true, true);
plotLine = yAxis.plotLinesAndBands[0].svgElem;
d = plotLine.d.split(' ');
newY = yAxis.toPixels(y) - d[2];
plotlabel = yAxis.plotLinesAndBands[0].label;
plotlabel.animate({
translateY: newY,
text: Highcharts.numberFormat(y, 2)
}, {
duration: 400,
step: function() {
$(this.element).html(y + 'EUR');
},
complete: function() { }
}),
plotLine.animate({
translateY: newY
}, 400);
});
}, 1000);
}
}
},
title: { text: ''},
exporting: { enabled: false },
credits: { enabled: false },
xAxis: { type: 'datetime'},
yAxis: { opposite: true,
labels: {
align: 'left',
},
gridLineWidth: 0,
title: {
text: 'Exchange rate'
},
},
plotOptions: {
areaspline: {
marker: {
enabled: false
}
}
},
series: [{
name: 'Exchange BTC to EUR',
data: data,
type: 'areaspline',
threshold: null,
animation: true,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: { x1: 5, y1: 0, x2: 0, y2: 0
},
stops: [ [0, Highcharts.getOptions().colors[0]], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] ]
}
}]
});
}});
}
$(document).ready(function() {
var selectedTimeFrameUrl = null;
var srcURL = $("#hour").data( "url" );
drawHighchart(srcURL);
$("#min, #hour, #day, #forever").click(function(){
var srcURL = $(this).data( "url" );
drawHighchart(srcURL);
});
});
$(".stop_button").click(function(){
clearInterval(reload);
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- Bottons to change the json file -->
<button id="min" data-url="https://api.myjson.com/bins/15v8km" class="stop_button">Month</button>
<button class="stop_button" id="hour" data-url="https://api.myjson.com/bins/inbza">Day</button>
<button class="stop_button" id="day" data-url="https://api.myjson.com/bins/dafja">Hour</button>
<button class="stop_button" id="forever" data-url="https://api.myjson.com/bins/psj8m">Hour</button>
<div id="container" style="height: 400px; width: 100%"></div>
我希望你能得到所需的