Question

我正在尝试做这样的事情

01 ...do some heavy duty stuff

02   //delete some rows <tr>
03 $('...').fadeOut(function () {
04     $(this).remove();
05 }); 

06 ...do some heavy duty stuff
07 ...add some rows <tr>

然而，fadeOut的回叫功能不会立即起火。因此，我删除它们后添加新行的逻辑无法正常工作。我知道我可以将代码放在回调中的第6行和第7行，但我不想这样做，因为回调有很多逻辑并且从其他地方调用。

有没有办法可以强制fadeout（）在到达第6行之前完成回调？

Answer 1

不，即使有办法，这也是一个坏主意，因为它会阻止许多浏览器完全更新其GUI，使其挂起。

如果你在许多地方使用的fadeOut函数中有一个共同的回调（让我们调用这个commonCallback），你需要做的就是将它包装在另一个函数中：

// ...do some heavy duty stuff

//delete some rows <tr>
$('...').fadeOut(function () {
    commonCallback();

    // ...do some heavy duty stuff
    // ...add some rows <tr>
});

Answer 2

一个安全的选择是使用setTimeout()，其持续时间设置为与fadeOut()相同。

$('...').fadeOut(function () {
     $(this).remove();
}, 600); 

setTimeout(function() {
    // place your code that should wait
    //   for the fadeOut to complete
    //   inside here
}, 600);

请注意，两者的持续时间设置为相同的600ms持续时间。

您在setTimeout函数中使用的任何代码都会等待600ms执行，而不会冻结浏览器。

Answer 3

也许你可以设置一个标志？我不认为这是一个很好的选择，但它可能会奏效。

更重要的是代码的结构。并非一切都需要匿名。即使回调很复杂，您仍然可以组织代码，以便将第6行和第7行移动到回调中很容易。例如：

$('...').fadeOut(function() {
   doRemoveAndLotsOfCoolStuff();
   doLines6and7();
});

使jQuery Fadeout（）回调函数同步

3 个答案: