Обратный вызов jQuery fadeTo выполняется без видимой причины - PullRequest
Новая
       12

Обратный вызов jQuery fadeTo выполняется без видимой причины

1 голос
/ 15 июля 2011

Приведенный ниже код работает, но по какой-то причине обратный вызов $ ('# chart'). FadeTo создает действительно странный цикл. 

function fullViewButton(zoom){
if (zoom == 0){
    $('input#fullChart').hide();
} else {
    $('input#fullChart').show();
    $('input#fullChart').click(function(){
        $('#chart').fadeTo(400,0, function(){
            showFullChart();
        });
        $('#chart').fadeTo(400,1);
    });
}

По сути, я строю график, который показываетобщая статистика.Пользователь может выбрать подмножество, которое он хочет видеть в диаграмме, и код будет перерисовывать график в том же самом div.В этом подробном представлении я вызываю кнопку, которая позволяет пользователю вернуться к общему виду.

Этот код хорошо работает один раз (переход от общей диаграммы к подробной диаграмме и обратно к общей диаграмме).Во второй раз, когда он переходит к третьему шагу, он возвращает весь график обратно, снова исчезает и снова возвращает его. В третий раз он делает это три раза.Четвертый, четыре раза.И т.д. Я не могу понять, что могло бы создать цикл вроде этого!

Я пытался переместить $ ('# chart'). FadeTo (400,1);в обратном вызове, который в итоге заставляет весь график показываться в два (или три, или четыре) раза дольше.Что-то не так с этим кодом, или я что-то напутал в showFullChart?

Ответы [ 3 ]

2 голосов
/ 15 июля 2011

Каждый раз, когда запускается fullViewButton(), он присваивает другой идентичный обработчик .click() элементу 'input#fullChart'.

Поэтому, когда он фактически щелкается (или срабатывает), он запускает накопление обработчиков, которые были назначены до сих пор.

Вы должны назначить обработчик .click() на 'input#fullChart' только один раз.

Не уверен, как выглядит ваш другой код, но вы, вероятно, хотите что-то вроде этого: 

   // This assigns the click handler
$('input#fullChart').click(function(){
    $('#chart').fadeTo(400,0, function(){
        showFullChart();
    });
    $('#chart').fadeTo(400,1);
});

function fullViewButton(zoom){
if (zoom == 0){
    $('input#fullChart').hide();
} else {
    $('input#fullChart').show().click();  // <-- this invokes the click handler

}
0 голосов
/ 16 июля 2011

Попробуйте использовать метод stop() вместе с animate, например так: 

function fullViewButton(zoom){

var fChart = $('input#fullChart');
var chart = $('#chart');

if (zoom == 0){
    fChart.css({display:'none',opacity:0});
} else {
    fChart.css({display:'block',opacity:1});
    fChart.click(function(){
        chart.stop().animate({opacity:0}, 400, function(){
            $(this).css({display: 'none'});
            showFullChart();
        });
        chart.stop().css({display:'block',opacity:0}).animate({opacity:1}, 400);
    });
}
0 голосов
/ 16 июля 2011

га, не могу сказать вам, сколько раз я это делал, причина в том, что вы звоните fullViewButton несколько раз, и каждый раз повторно добавляете функцию fadeTo при нажатии

для быстрого исправления вы можете просто поставить 

$('input#fullChart').click(function(){
    $('#chart').fadeTo(400,0, function(){
        showFullChart();
    });
    $('#chart').fadeTo(400,1);
});

вне fullViewButton()

...