Question

我有两个按钮，它们应该显示两个不同的图形系列。每个系列的图表逐渐显示在一起，延迟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)

...但我无法弄清楚在哪里使用它。无论我把它放在哪里，我都会得到'未知变量计时器'。

Answer 1

请注意，{<1}}具有任何效果必须在超时持续时间之前调用，即在调用绑定函数之前。其次，在您的情况下，由于图形渲染已经开始，仅clearTimeout()是不够的。

您可以使用某种标志来指示是否应该中止图形渲染操作。

例如：

clearTimeout()

中断JQuery setTimeout函数

1 个答案: