翻訳中

Effect Queues †

What is a Queue †

queueの中でどのようなイベントが起こるか: プログラマーにとってqueueとは個々にハンドルされお互いに積み重ねられたイベントの配列です。
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.
例えば、あるユーザーがカーソルをボタンに載せて、そしてその0.5秒後にボタンからカーソルを離したとします。
Two events have taken place, the mouseover and the mouseout.
二つのイベントが発生します。mouseoverとmouseoutです。
If you would handle the mouseover and the mouseout event takes place, it could disturb your current process.
mouseoverとmouseoutの二つのイベントの発生を取得する場合、このイベントは現在のプロセスに割り込むことになります。
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.
しかし、このイベントを無視することはできません。なぜなら、あなたが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).
この場合、あなたはイベントをqueueに追加し、イベントの処理を終了する度にqueueの未処理のイベントをチェックできます。(そして実行する)

↑

[edit]

How do Effects work and why do you need a Queue †

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).
同様のことがエフェクトの処理でも起こります。二つのエフェクトが呼び出され、それらが同一のDOMオブジェクトを扱う場合です。
script.aculo.us comes to the rescue with several techniques to manage your effects.
script.aculo.usは所々のテクニックでエフェクトの管理を助けます。
To explain this further, we will show you how things work by example.
どのように動くのか例で説明します。

Let’s start creating two effects

div (id=”test1”) となんらかのコンテンツでページを作ります, Example 1 と名づけます. このページはonloadで次の二つのエフェクトを実行します:

new Effect.SlideDown('test1');
new Effect.SlideUp('test1');

These effects are executed in parallel and thus one effects tries to slide the div down and the other to slide it up. Its doesn’t work and you only see some flickering.
このエフェクトは並列に実行され、一つはdivをスライドダウンし、もう一つはスライドアップします。このエフェクトは動かずに、ちらつくだけです。
However a similar thing occurs when you call “new Effect.Slide Down?(‘test1’);” with a onclick and then “new Effect.SlideUp(‘test1’);” with a onclick to during the first effect.
似たようなことが、“new Effect.Slide Down?(‘test1’);”をonclickに指定し、このエフェクト中に“new Effect.SlideUp(‘test1’);”をonclickに指定した場合に起こります。
When you do this several times (quickly), you will see that the effects don’t work anymore.
何度かこれを行うとエフェクトが動作しないのが確認できるでしょう。
The same problem also occurs in many other situations. That’s why we need Effect.Queue.
同様の問題は他の多くのシチュエションで発生します。それでqueueが必要になります。

↑

[edit]

Effect.Queue †

The previous examples gave you an idea of the situations you could be facing without Queues.
直前の例はqueue無しで発生する問題の例です。
This must give you some motivation to find how Effect.Queue could improve your live and help you to manage your Effects.
どのようにqueueがエフェクトの管理を助けるかを考える刺激をあなたにあたえる。
Effect.Queue is an improved array of Effects (called Enumerable) that is global for the entire page.
Effect.QueueはEnumerableと呼ばれるエフェクトの配列です。これはページ全体に対してグローバルです。
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.
よって、queueに追加されるすべてのエフェクトはグローバルなqueueに追加されます。
You might be wondering how to add an effect to the queue? Well it’s quite easy.
どのようにエフェクトをqueueに追加するか？　それは簡単です。

When you are creating an effect, you can pass several arguments.
エフェクトの作成時にいくつかの引数を渡すことができます。
Let’s look at How effects are created.
エフェクトがどのように作成されるか。
The first argument is the DOM element you wish to manipulate, but you already know that.
最初の引数は操作したいDOM要素です、しかし既にご存知でしょう。
The second argument is actually an array of options that you can pass along, let’s examine that for Effect.Queue.
2番目の引数は、渡すことのできるオプションの配列です、Effect.Queueのそれについて見ていきましょう。
We will use Effect.SlideDown and Effect.SlideUp like in the previous examples.
前回の例と同様にSlideDownとSlideUpを使います。

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”.
"end"という値を持つ"query:"というエントリを含む配列を追加しました。
This means that the Effect will be inserted at the end of the “global” Queue.
これは、エフェクトがグローバルなqueueの最後に挿入されることを意味します。
All effects are always added to the queue, however without a position like ‘end’ they are always executed parallel to the other effects.
全てのエフェクトは常にキューに追加さますが、"end"という位置が指定されない場合は常に他のエフェクトと平行して実行されます。

Let’s take a look at the improved example 1.
改善されたexample 1を見てみましょう。
You see that first the element slides down and then it slides back up again.
最初にエレメントがスライドダウンし、その後スライドアップして戻るのが確認できます。
There is also an option to insert the Effect at the front of the queue.
エフェクトをqueueの最初に挿入するオプションもあります。
You would use ‘front’ instead of ‘end’ in that case.
その場合、"end"の代わりに"front"を使います。

new Effect.SlideUp('test1', {queue: 'end'});
new Effect.SlideDown('test1', {queue: 'front'});

This would place the SlideDown before the SlideUp effect (same as the previous examples). The argument you pass as “queue:” is called a position and it can be used with a different syntax, but we will go into that later.
これは、SlideDownをSlideUpの前に配置します(前回の例と同じ)。あなたの引数として渡す"queue:"は位置として呼ばれます。また、それは別の構文で使用することもできますがそれについては後述します。

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.
JavaScriptはマルチスレッドではありませんので、コードのブロックはパースされたときに同時に実行されます。これが原因で、queueが定義されていない時はエフェクトは並列に実行されます。

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 Effect.ScopedQueue comes in.
そこで、Effect.ScopedQueueが役に立ちます。

↑

[edit]

Basic Effect.ScopedQueue †

As explained before, the default Queue is ‘global’.
既に説明したようにデフォルトのQueueはグローバルです。
All effects are placed in the ‘global’ Queue unless you define a different scope.
すべてのエフェクトは別のスコープを定義しない限りグローバルのqueueに配置されます。
A scope is nothing more than grouping a set of Effects together in their own Queue.
スコープはそれぞれの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).
これを行うには、"queue:"オプションに文字列の代わりに配列を渡す必要があります(つまり外部の配列の中に配列を持つことになります)。
This can only be done by using a different syntax to define the Queue position.
これはqueueの位置を定義するのに別の構文を使用することのみによって実行されます。

// small and easy syntax
new Effect.SlideUp('test1', {queue:'end'});

// syntax that allows for more tuning
new Effect.SlideUp('test1', {queue: {position:'end'} });

The two examples are identical produce identical behaviour.
二つの例は同様の動作を生み出します。
However, the second syntax allows you to define a scope (a different queue) with the following syntax:
しかし、 2番目の構文はスコープ(異なるqueue)の定義を可能にします。次の構文:

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'} });

↑

[edit]

ここまで翻訳 †

The “scope:” argument has defined a separate queue named ‘menuxscope’. This queue could for example contain all menu-related effects. A second scope named “bannerscope” is defined, it could contain all banner-related effects. In what order are these separate queues executed? First both 1 and 2 get executed, and when 1 is done 3 is executed. Check example 3 for a preview

Just remember, if you don’t define a scope, the effect is added to the default “global” scope, which can be accessed from Effect.Queue.
Limit

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

#1 and #2 will be added to the queue but #3 will not.

This covers the queue for Effects, lets move on to Effect.Queues and the rails helper.
Effect.Queues

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.

var queue = Effect.Queues.get('myscope');

ScopedQueue manages the ‘effects’, this is an internal system accessed by the Effect object. However you can, if you wish, add effects to the queue and remove them by yourself. Note that this requires some knowledge about the internal workings of the system.

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;

Rails helper

At the time of this writing there is only limited support for the queue element of Effects. However a patch (#3530) for improved support has been submitted. It will allow you to use the following syntax when you use rails:

visual_effect :slide_up, {:queue => 'end'} // only define position
visual_effect :slide_up, {:queue => {:position => 'end', :scope => 'myscope', :limit => 5}}

Note that this functionality currently only works with EdgeRails and with the patch applied. However you can use the JavaScript with the latest source from script.aculo.us.
Example

To wrap up the tutorial (which is followed by reference documentation and some useful links) we have made an example of how the queues would turn up with the code we wrote.

To fully master queues, you have to be familiar with how Effects and Enumerable work.
Reference documentation

The Effect.Queues object
Method Kind Return Arguments Description
get(scopeName) ??? Scoped Queue? object scopename: string scopeName: the name of the scope of the queue

var queue = Effect.Queues.get(‘myscope’);

Queue parameter for Effects
Property Type Description
queue string position of the Effect in the queue. Can be both ‘front’ or ‘end’

new Effect.Slide Up?(‘menu’, {queue: ‘front’ });
new Effect.Slide Down?(‘menu’, {queue: ‘end’ });

Queue parameter options for Effect
Property Type Description
position string position of the Effect in the queue. Can be both ‘front’ or ‘end’
scope string the Scope Queue? to add the Effect to. Default to ‘global’
limit string the maximum numbers of ‘active’ or ‘idle’ effects

new Effect.SlideUp('menu', {queue: {position:'front', scope: 'myscopeone'} });
new Effect.SlideDown('menu', {queue: {position:'end', scope: 'myscopetwo'} });

Much of this initial content was created by Abdur-Rahman Advany on his blog, blog.railsdevelopment.com. On 4 November, 2006, he gave permission on his blog for his excellent tutorial to be used here under the Script.aculo.us license.
For now, see the excellent article on Effect Queues here:
http://blog.railsdevelopment.com/pages/effect/queue/

参考：Effect Queues

tag: Effects?, JavaScript, Tween?