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()运行时，它都会为.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

}

Answer 2

哈，不能告诉你我完成了多少次，原因是你多次拨打fullViewButton，每次都在'click'上重新附加fadeTo功能

快速修复你可以放

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

在fullViewButton()之外

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

jQuery fadeTo回调是没有明显原因的循环

3 个答案: