Question

早上好的人 - 我几个小时都遇到过这个问题而我无法隔离它。

我有这个jQueryzed JavaScript：

jQuery(document).ready(function() {
    var validated = 1;

    jQuery('#help_continue').click(function() {
        jQuery('#step' + validated + ', #step' + validated + '_help').fadeOut(200, function() {
            jQuery('#step' + validated + '_help').removeClass('visible').find('.visible').removeClass('visible');
            jQuery('#step' + (validated + 1) + '_help').addClass('visible');
            jQuery('#step' + (validated + 1) + '_help div:first').addClass('visible').css({display: 'block'});
            jQuery('#step' + (validated + 1) + ', #step' + (validated + 1) + '_help').fadeIn(200);
        });
    });
});

一切都好，没什么太花哨的。如果绑定到HTML，它将按预期工作。

问题在于，当我将其添加到混音中时：

jQuery(document).ready(function() {
    var validated = 1;

    jQuery('#help_continue').click(function() { 
        jQuery('#step' + validated + ', #step' + validated + '_help').fadeOut(200, function() {
            jQuery('#step' + validated + '_help').removeClass('visible').find('.visible').removeClass('visible');
            jQuery('#step' + (validated + 1) + '_help').addClass('visible');
            jQuery('#step' + (validated + 1) + '_help div:first').addClass('visible').css({display: 'block'});
            jQuery('#step' + (validated + 1) + ', #step' + (validated + 1) + '_help').fadeIn(200); alert(validated); // this...
        });
        validated++; // ...and this.
    });
});

它显示TWICE的警告，并且“validated”变量在函数内部为NEVER = 1 - 总是2。

我肯定不是JavaScript大师，但我绝对知道这是完全错的，除非我遗漏了什么。我来自PHP背景，我知道JavaScript有它的特性，但这很奇怪。

如果重要的话，我正在使用jQuery 1.5。谁知道发生了什么？

Answer 1

作为回调传递给fadeOut的代码仅在约200ms超时后执行。但是代码没有阻塞。即点击处理程序内的所有内容，以及调用fadeOut后的语句，都会立即执行。

jQuery('#help_continue').click(function() {
    // first 
    jQuery('....').fadeOut(200, function() {
        // second
    });
    validated++; // first
});

但是这不应该两次显示警告...无论如何，如果你想在点击时增加validate，但是当调用fadeOut回调时它应该具有正确的值，你可以立即执行此功能：

jQuery('#help_continue').click(function() {       
    (function(validated) {
        jQuery('....').fadeOut(200, function() {
            // ...
        });
    }(validated));
    validated++;
});

搞乱变量范围和函数的jQuery回调？

1 个答案: