本文介绍如何使用队列来管理JavaScript中的多个效果，确保效果按指定顺序执行而非并行。通过Effect.Queue和Effect.ScopedQueue，可以对不同元素的效果进行排队，并设置队列长度限制。
[b]What is a Queue[/b]
Let’s examine how events in a queue occur: For a programmer a queue is an Array with events that are stacked on each other to be handled one by one. For example, a user hovers over a button with his cursor and then after half a second leaves the button area again. Two events have taken place, the mouseover and the mouseout. If you would handle the mouseover and the mouseout event takes place, it could disturb your current process. However you can’t just ignore the event, because then you will be stuck in the status that is established by the actions you have performed for mouseover. In this situation you could add the event to a queue and every time you’re done with processing an event, just check the queue for unprocessed events (and act accordingly).
[b]How do Effects work and why do you need a Queue[/b]
The same happens when you are dealing with Effects and you face the situation where two effects can be called, both of which manipulate the same DOM object(s). script.aculo.us comes to the rescue with several techniques to manage your effects. To explain this further, we will show you how things work by example.
[b]什么是queue? 为了解决对同一个元素触发多个处理效果时需要解决效果发生的先后顺序问题。通过Queue队列的形式将并行的效果按我们的先后顺序串行化。[/b]
Effect.Queue
The previous examples gave you an idea of the situations you could be facing without Queues. This must give you some motivation to find how Effect.Queue could improve your live and help you to manage your Effects.
Effect.Queue is an improved array of Effects (called Enumerable) that is global for the entire page. It gets created by extracting the global queue from Effect.Queues (we will discuss this later). So all effects you want to queue will be added to the ‘global’ queue. You might be wondering how to add an effect to the queue? Well it’s quite easy.
[b]Effect.Queue是一个改进的Effects数组。此对象作用范围为页面全局可访问。[/b]
So you see I have added an array containing an entry “queue:” with the value “end”. This means that the Effect will be inserted at the end of the “global” Queue. All effects are always added to the queue, however without a position like ‘end’ they are always executed parallel to the other effects.
[b]如果没有queue:end，效果将并行的执行。[/b]
[b]Remember that JavaScript is not multi-threaded, so blocks of code are executed together when they get parsed. This causes the effects to start in parallel if no queue is defined.[/b]
This works nicely, doesn’t it? But what happens when you queue all kinds of effects in different places? You could have lots of effects that you would like to queue but they don’t all relate to each other. This is where [b]Effect.ScopedQueue [/b]comes in.
[b]Basic Effect.ScopedQueue[/b]
As explained before, the [b]default Queue is ‘global’[/b]. All effects are placed in the ‘global’ Queue unless you define a different scope. A scope is nothing more than grouping a set of Effects together in their own Queue. To do this, you need to pass an array instead of a string to the “queue:” option (so you have an array inside the outer array). This can only be done by using a different syntax to define the Queue position.
[b]Limit 限制队列长度[/b]
Sometimes too many effects get queued, for example when a user presses a button twice, or repeatedly enters and leaves a button hover area (and each time two effects are queued). This can cause a lot of distracting activity. To prevent this, we can add a “limit: n” option to the queue so no more than n effects are added to that ScopedQueue.
[b]#1 and #2 will be added to the queue but #3 will not.[/b]
[b]Effect.Queues[/b]
So what is Effect.Queues and why do we need it? Well, for each scope an instance of Effect.Scoped Queue? is created. That instance is stored in Effect.Queues. You can access it by using Effect.Queues.get(‘global’) which is the same as Effect.Queue because the default ‘global’ queue is saved into Effect.Queue by script.aculo.us. However when you need to access a scope other than ‘global, you need to fetch it using Effect.Queues.get(‘myscope’) before you can manipulate it.
我们可以从Effect.Queues得到我们创建的Queue。因为它们都保存在Effect.Queues中
了！
ScopedQueue is just an Enumerable object. You can retrieve the effects one by one and manipulate them. Let’s look at how we can ‘empty a queue’.
Or maybe you want to change the interval between the effects in a queue:
更多精彩细节？
请看[url]http://wiki.script.aculo.us/scriptaculous/show/EffectQueues[/url]
Let’s examine how events in a queue occur: For a programmer a queue is an Array with events that are stacked on each other to be handled one by one. For example, a user hovers over a button with his cursor and then after half a second leaves the button area again. Two events have taken place, the mouseover and the mouseout. If you would handle the mouseover and the mouseout event takes place, it could disturb your current process. However you can’t just ignore the event, because then you will be stuck in the status that is established by the actions you have performed for mouseover. In this situation you could add the event to a queue and every time you’re done with processing an event, just check the queue for unprocessed events (and act accordingly).
[b]How do Effects work and why do you need a Queue[/b]
The same happens when you are dealing with Effects and you face the situation where two effects can be called, both of which manipulate the same DOM object(s). script.aculo.us comes to the rescue with several techniques to manage your effects. To explain this further, we will show you how things work by example.
[b]什么是queue? 为了解决对同一个元素触发多个处理效果时需要解决效果发生的先后顺序问题。通过Queue队列的形式将并行的效果按我们的先后顺序串行化。[/b]
Effect.Queue
The previous examples gave you an idea of the situations you could be facing without Queues. This must give you some motivation to find how Effect.Queue could improve your live and help you to manage your Effects.
Effect.Queue is an improved array of Effects (called Enumerable) that is global for the entire page. It gets created by extracting the global queue from Effect.Queues (we will discuss this later). So all effects you want to queue will be added to the ‘global’ queue. You might be wondering how to add an effect to the queue? Well it’s quite easy.
[b]Effect.Queue是一个改进的Effects数组。此对象作用范围为页面全局可访问。[/b]
new Effect.SlideDown('test1');
new Effect.SlideUp('test1', { queue: 'end'});So you see I have added an array containing an entry “queue:” with the value “end”. This means that the Effect will be inserted at the end of the “global” Queue. All effects are always added to the queue, however without a position like ‘end’ they are always executed parallel to the other effects.
[b]如果没有queue:end，效果将并行的执行。[/b]
[b]Remember that JavaScript is not multi-threaded, so blocks of code are executed together when they get parsed. This causes the effects to start in parallel if no queue is defined.[/b]
This works nicely, doesn’t it? But what happens when you queue all kinds of effects in different places? You could have lots of effects that you would like to queue but they don’t all relate to each other. This is where [b]Effect.ScopedQueue [/b]comes in.
[b]Basic Effect.ScopedQueue[/b]
As explained before, the [b]default Queue is ‘global’[/b]. All effects are placed in the ‘global’ Queue unless you define a different scope. A scope is nothing more than grouping a set of Effects together in their own Queue. To do this, you need to pass an array instead of a string to the “queue:” option (so you have an array inside the outer array). This can only be done by using a different syntax to define the Queue position.
new Effect.SlideUp('menu', {queue: {position:'end', scope: 'menuxscope'} });
new Effect.SlideUp('bannerbig', {queue: {position:'end', scope: 'bannerscope'} });
new Effect.SlideDown('menu', {queue: {position: 'end', scope: 'menuxscope'} });[b]Limit 限制队列长度[/b]
Sometimes too many effects get queued, for example when a user presses a button twice, or repeatedly enters and leaves a button hover area (and each time two effects are queued). This can cause a lot of distracting activity. To prevent this, we can add a “limit: n” option to the queue so no more than n effects are added to that ScopedQueue.
new Effect.SlideDown('menu', {queue: {position:'end', scope: 'menuxscope', limit:2} }); // #1
new Effect.Highlight('menu', {queue: {position:'end', scope: 'menuxscope', limit:2} }); // #2
new Effect.SlideUp('menu', {queue: {position: 'end', scope: 'menuxscope', limit:2} }); // #3[b]#1 and #2 will be added to the queue but #3 will not.[/b]
[b]Effect.Queues[/b]
So what is Effect.Queues and why do we need it? Well, for each scope an instance of Effect.Scoped Queue? is created. That instance is stored in Effect.Queues. You can access it by using Effect.Queues.get(‘global’) which is the same as Effect.Queue because the default ‘global’ queue is saved into Effect.Queue by script.aculo.us. However when you need to access a scope other than ‘global, you need to fetch it using Effect.Queues.get(‘myscope’) before you can manipulate it.
我们可以从Effect.Queues得到我们创建的Queue。因为它们都保存在Effect.Queues中
了！
var queue = Effect.Queues.get('myscope');ScopedQueue is just an Enumerable object. You can retrieve the effects one by one and manipulate them. Let’s look at how we can ‘empty a queue’.
var queue = Effect.Queues.get('myscope');
queue.each(function(e) { e.cancel() });Or maybe you want to change the interval between the effects in a queue:
Effect.Queues.get('myscope').interval = 100;更多精彩细节？
请看[url]http://wiki.script.aculo.us/scriptaculous/show/EffectQueues[/url]
扫一扫
305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
