我有两个按钮,它们应该显示两个不同系列的图形。每个系列的图表以 3 秒的延迟逐渐显示在另一个之下。如果用户单击第一个按钮,他逐渐显示第一个系列,如果用户单击第二个按钮,第一个系列被删除,第二个系列开始逐渐显示。
这是一段代码:
<button type="button" onclick="show_graphs(1)"></button>
<button type="button" onclick="show_graphs(2)"></button>
<div id="stats"></div>
function show_graphs(type) {
var i = 0;
$('#stats').html('');
$.getJSON('stats.php?type=' + type, function (data) {
for (chartData in data) {
i++;
var timer = setTimeout(function(index,d1){
return function() {
var chart = new AmStockChart();
dataSet.dataProvider = data[d1];
// etc. etc.
$('#stats').append('div id="chartdiv' + index + '"></div>');
chart.write("chartdiv" + index);
}
}(i,chartData), 3000*i);
}
});
问题是,如果用户在第一个系列完成附加之前单击第二个按钮,那么 div 将被清除,但第一个系列继续附加其 graps,然后第二个系列被附加。因此,据我所知,我需要先停止 setTimeOut,然后再使用另一个参数第二次运行它。我知道我需要使用
clearTimeout(timer)
...但我不知道在哪里使用它。无论我把它放在哪里,我都会得到“未知变量计时器”。