`
wutao8818
  • 浏览: 616595 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Effect Queues

    博客分类:
  • js
阅读更多
What is a 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. 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).
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). 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.

什么是queue? 为了解决对同一个元素触发多个处理效果时需要解决效果发生的先后顺序问题。通过Queue队列的形式将并行的效果按我们的先后顺序串行化。

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.

Effect.Queue是一个改进的Effects数组。此对象作用范围为页面全局可访问。

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.

如果没有queue:end,效果将并行的执行。

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.

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.

Basic Effect.ScopedQueue

As explained before, the default Queue is ‘global’. 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'} });


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.

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.

我们可以从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;


更多精彩细节?
请看http://wiki.script.aculo.us/scriptaculous/show/EffectQueues



分享到:
评论

相关推荐

    UNIX Network Programming Volume 2(Unix网络编程卷2英文版)

    1.5 effect of fork, exec, and exit on ipc objects 9 1.6 error handling: wrapper functions 11 1.7 unix standards 13 1.8 road map to ipc examples in the text 15 1.9 summary 16 chapter 2. posix ipc...

    陶隽-基于Apache Zookeeper的分布式协调原理及应用

    协调问题主要包含以下几个方面:领队选举(Leader Election)、群组成员关系(Group Membership)、配置管理(Configuration Management)以及其他如集合点(Rendezvous)、屏障(Barriers)、队列(Queues)和两...

    50个jQuery函数演示-SmashingMagazinePost的完整代码___下载.zip

    9. **队列和效果链(Queues and Effect Chaining)**:jQuery支持效果队列,允许我们顺序执行动画。同时,可以使用链式调用来提高代码可读性。 10. **事件委托(Event Delegation)**:当动态添加元素时,使用`.on...

    data 考試 台灣最好的大學

    - MOS Field-Effect Transistors (MOSFETs)(金属氧化物半导体场效应晶体管) - Bipolar Junction Transistors (BJTs)(双极结型晶体管) - Single-Stage Amplifiers(单级放大器) - Differential and Multistage ...

    Purely Functional Data Structures.pdf

    与常见的命令式编程范式(Imperative Programming)不同,函数式编程强调不可变性(Immutability)和函数无副作用(Side-effect free)。在这种背景下,数据结构的设计与实现也与传统的命令式语言如C或C++有所差异。...

    S7A驱动720版本

    S7A驱动,7.20版本, Version history S7A OPC server and FIX driver for Siemens S7/S5 communication via Ethernet TCP/IP, MPI or Profibus ...==============================================...

    微软内部资料-SQL性能优化2

    The pool is, in effect, a common area of memory shared by all processes. One of the most common uses of non-paged pool is the storage of object handles. For more information regarding “maximums,...

    数位板压力测试

    sdk LCS/Telegraphics Wintab* Interface Specification 1.1: 16- and 32-bit API Reference By Rick Poyner Revised February 11, 2012 This specification was developed in response to a perceived need for a...

Global site tag (gtag.js) - Google Analytics