jQuery fadeTo 回调无明显原因循环

Question

下面的代码有效，但由于某种原因 $('#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 中的某些内容？

Answer 1

每次运行 fullViewButton() 时，它都会向 'input#fullChart' 元素分配另一个相同的 .click() 处理程序。

因此，当实际单击（或触发）时，它会运行迄今为止已分配的处理程序的累积。

您应该仅将 .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

}

Answer 2

哈，无法告诉你我已经这样做了多少次，原因是你多次调用 fullViewButton ，并且每次都重新附加 fadeTo 函数'点击'。

为了快速修复，您可以将其放在

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

fullViewButton() 之外

Answer 3

尝试将 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);
    });
}