Question

无论如何，我想知道在运行新的代码行之前是否有办法检测特定代码段是否运行，直到它完成。

例如，

if(filterVal == 'all') {  
    jQuery('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');  
} else {  
    jQuery('ul#portfolio li').each(function() {  
        if(!jQuery(this).hasClass(filterVal)) {  
            jQuery(this).fadeOut('normal').addClass('hidden');  
        } else {  
            jQuery(this).fadeIn('slow').removeClass('hidden');  
        }  
    });  
}

我想要做的是确保在触发jPages函数创建分页之前，所有list-item元素都成功地成功淡入（显示：块）和fadeOut（显示：无）。

Answer 1

.fadeIn()中有一个参数可以解决这个问题。

$('ul#portfolio li.hidden').fadeIn('slow', function()
{
    // Fade has finished, continue here.
    //
    //

});

Answer 2

给它一个回调函数。尝试：

jQuery(this).fadeOut('normal', function(){
    $(this).addClass('hidden'); 
})

如果您必须多次执行此操作，请使用：

jQuery('ul#portfolio li').each(function() {  
    if(!jQuery(this).hasClass(filterVal)) {  
        jQuery(this).addClass('hidden');  
    } else {  
        jQuery(this).removeClass('hidden');  
    }  
});  

$('ul#portfolio li.hidden').fadeOut('normal', function(){
    //Finished
});
$('ul#portfolio li:not("hidden")').fadeIn('slow', function(){
    //Finished
});

Answer 3

所以我想我发现了如何使用.promise()

来做到这一点

我的代码看起来像这样：

jQuery('ul#portfolio li').promise().done(function()
{
    jQuery('ul#portfolio li').each(function()
    {
        console.log(jQuery(this).attr('class') + '-' + jQuery(this).css('display'));

    });

});

等到某些代码运行

3 个答案: