jQuery fadeTo 回调无明显原因循环答案

【问题标题】：jQuery fadeTo callback is looping for no apparent reasonjQuery fadeTo 回调无明显原因循环
【发布时间】：2011-07-16 04:05:29
【问题描述】：

以下代码有效，但由于某种原因，$('#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 中搞砸了？

【问题讨论】：

标签： jquery fadeto

【解决方案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

}

【讨论】：

啊哈！对不起n00b问题。将 .click() 代码移到我的 if 语句之外修复了它。谢谢！

【解决方案2】：

哈，不能告诉你我这样做了多少次，原因是你多次调用fullViewButton，并且每次都在“点击”上重新附加fadeTo函数。

为了快速修复，你可以把

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

fullViewButton()之外

【讨论】：

这成功了！我很感激;这真的让我很沮丧！

【解决方案3】：

尝试将stop() 方法与动画一起使用，如下所示：

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);
    });
}

【讨论】：