Функция прерывания JQuery setTimeout

0

У меня есть две кнопки, которые должны отображать две разные серии графиков. Каждая серия графиков постепенно отображается одна под другой с задержкой в 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 очищается, но первая серия продолжает добавлять свои графы, а затем добавляется вторая серия. Так что, как мне кажется, мне нужно остановить первый setTimeOut, прежде чем запускать его второй раз с другими параметрами. Я понимаю, что мне нужно использовать

clearTimeout(timer)

... но я не могу понять, где его использовать. Где бы я ни сказал, я получаю "неизвестный таймер переменной".

  • 0
    проблема в том, что переменная timer является локальной для функции обратного вызова $.getJSON ...
  • 0
    где вы используете clearTimeout(timer) ?
Показать ещё 5 комментариев
Теги:
settimeout

1 ответ

2

Обратите внимание, что clearTimeout() чтобы иметь какой-либо эффект, нужно вызвать до истечения времени ожидания, т.е. до вызова связанной функции. Во-вторых, в вашем случае, поскольку рендеринг графика уже начался, clearTimeout() будет недостаточно.

Вы можете использовать какой-то флаг, чтобы указать, следует ли прерывать операцию рендеринга графика или нет.

Например:

// cancel indicator
var cancelGraph = {}, timer;

function show_graphs(type) {

    // abort any other rendering
    clearTimeout(timer); // clear timeout if rendering not already started

    // cancel other running operations
    for(var otherType in cancelGraph) {
        if(otherType !== type) cancelGraph[otherType] = true;
    }

    $('#stats').html('');

    // set current one as non-cancelled
    cancelGraph[type] = false; 

    var i = 0;

    $.getJSON('stats.php?type=' + type, function (data) {
        for (chartData in data) {

            if(cancelGraph[type] === true) break; // abort: don't continue rendering

            i++;
            timer = setTimeout(function(index,d1){
                ...
            }(i,chartData), 3000*i);
        }
    });
}
Поделиться
  • 0
    Большой! Что если «тип» может быть разным по количеству, то есть он фактически извлекается из БД Mysql для уникальных типов и кнопок отображения с этими типами, например, они могут быть от 3 до 11 типов?
  • 0
    В этом случае вы можете запустить небольшой цикл, чтобы убедиться, что все остальные отменены. Смотрите обновленный.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню