jQuery在Chrome和Mac OS上停滞不前 [英] jQuery draws to a halt on Chrome and mac OS

问题描述

查看此小提琴: http://jsfiddle.net/mattball/nWWSa/

Check out this fiddle: http://jsfiddle.net/mattball/nWWSa/

var $lis = $('ul.innerfade > li');

function fadeThemOut()
{
    $lis.fadeOut('slow', fadeThemIn);
}

function fadeThemIn()
{
    $lis.fadeIn('slow', fadeThemOut);
}

// kick it off
fadeThemOut();

淡入/淡出几次正常，但随后开始变得非常慢.问题是什么?这是一个错误吗?

The fading in/out works fine a couple of times, but then starts going very slow. What is the problem? Is this a bug?

推荐答案

问题在于，一旦每个元素淡入/淡出，不仅会在所有元素.因此，这会积累大量回调.就像这样(假设我们只有两个元素，A和B):

The problem is that the callbacks are executed for each element once it is faded in/out, not only when all of them are. So this accumulates a lot of callbacks. It goes like this (lets say we have only two elements, A and B):

开始时，队列为空:
答:[]
B:[]

At the beginning, the queues are empty:
A: []
B: []

然后在两个元素上调用fadeOut:
答:[fadeOut]
B:[fadeOut]

Then you call fadeOut on both elements:
A: [fadeOut]
B: [fadeOut]

淡出:fadeIn被添加到两个元素中.
答:[fadeIn]
B:[fadeOut, fadeIn]

A fades out: fadeIn is added to both elements.
A: [fadeIn]
B: [fadeOut, fadeIn]

然后B消失:再次，在两个元素中都添加了fadeIn.
答:[fadeIn, fadeIn]
B:[fadeIn, fadeIn]

Then B fades out: Again, fadeIn is added to both elements.
A: [fadeIn, fadeIn]
B: [fadeIn, fadeIn]

淡入:fadeOut已添加到两个元素.
答:[fadeIn, fadeOut]
B:[fadeIn, fadeIn, fadeOut]

A fades in: fadeOut is added to both elements.
A: [fadeIn, fadeOut]
B: [fadeIn, fadeIn, fadeOut]

B淡入:...
答:[fadeIn, fadeOut, fadeOut]
B:[fadeIn, fadeOut, fadeOut]

B fades in: ...
A: [fadeIn, fadeOut, fadeOut]
B: [fadeIn, fadeOut, fadeOut]

以此类推.确切的顺序可能会有所不同，但是由于默认情况下动画在排队，因此会向队列添加越来越多的回调.

And so forth. The exact order might differ, but as animations are queued by default, this adds more and more callbacks to the queue.

您可以使用递延对象解决此问题:

You can solve this using deferred objects:

$.when($lis.fadeOut('slow')).then(fadeThemIn);

演示

现在，仅当所有元素的动画完成后才调用fadeThemIn.

Now, fadeThemIn is only called when the animation of all elements is completed.

另一种方法是将功能更改为不适用于所有元素，而仅适用于当前元素:

Another way would be to change the functions to not work on all elements, but only on the current one:

var $lis = $('ul.innerfade > li');

function fadeThemOut()
{
    $(this).fadeOut('slow', fadeThemIn);
}

function fadeThemIn()
{
    $(this).fadeIn('slow', fadeThemOut);
}

// kick it off
fadeThemOut.call($lis);

尽管可能那时元素不同步.

though it could be that the elements are not in sync then.

演示

在特定情况下，您可以淡入和淡出ul元素.

In your specific case, you could just fade in and out the ul element.

这篇关于jQuery在Chrome和Mac OS上停滞不前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！