`
wutao8818
  • 浏览: 615107 次
  • 性别: 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



分享到:
评论

相关推荐

    Markov chains, Gibbs Fields Monte Carlo Simulation, and Queues.pdf

    根据提供的文件信息,本书《Markov chains, Gibbs Fields Monte Carlo Simulation, and Queues》由Pierre Bremaud撰写,被广泛认为是学习随机过程的重要教材之一。以下将根据标题、描述以及部分目录信息来总结书中的...

    Implementing Lock Free Queues

    无锁队列的C实现方法;作为备份;希望对别人有帮助

    First Course in Bulk Queues [M. L. Chaudhry] 原版影印

    《First Course in Bulk Queues》是由M. L. Chaudhry编写的一本关于批量队列系统的教科书。这本书主要讲解了排队论中的批量排队系统,排队论是研究服务系统中随机到达与服务过程的数学理论和方法。排队论的应用领域...

    Probability, Markov chains, queues and simulation

    首先,“Probability, Markov chains, queues and simulation” 这个标题暗示了书中将探讨几个关键的数学和计算机科学领域,它们对于性能建模至关重要。 **概率论**: - **概率试验**:这是研究随机现象的基础,...

    RabbitMQ练习(Work Queues)

    RabbitMQ练习(Work Queues)

    225.Implement stack using queues用队列实现栈【LeetCode单题讲解系列】

    225.Implement_stack_using_queues用队列实现栈【LeetCode单题讲解系列】

    An Optimistic Approach to Lock-Free FIFO Queues

    ### 乐观锁无锁FIFO队列方法解析 #### 概述 在并行计算领域,先进先出(FIFO)队列是最基础且被广泛研究的并发数据结构之一。这些队列通常作为构建高性能并发数据结构库的核心组件,如Java并发包(JSR-166)。...

    Queues 队列

    Laravel官方文档讲解,该资料是一整套视频,需要逐个下载,Queues 队列

    Fast Priority Queues for Cached Memory.

    Fast Priority Queues for Cached Memory.

    ThreadsAndQueues_Queues_delphi_threads_

    在IT领域,线程(Threads)和队列(Queues)是并发编程中不可或缺的概念,尤其是在像Delphi这样的面向对象的编程环境中。线程允许程序同时执行多个任务,而队列则是一种有效的数据结构,用于在多线程环境中管理任务...

    javaz-queues-1.1.zip

    【标题】"javaz-queues-1.1.zip" 提供的是一个名为 "javaz-queues" 的项目,版本为1.1。这个项目显然与Java编程语言有关,特别是聚焦在队列数据结构的实现上。队列是计算机科学中基础的数据结构之一,它遵循先进先出...

    STL.rar_STL_stl queues

    在这个"STL.rar"压缩包中,包含了一些关于STL的学习程序,特别是与队列(queues)相关的示例,这对于初学者来说是非常有价值的资源。 首先,我们来看看"vector"。`std::vector`是STL中的一个动态数组,它可以自动...

    Laravel开发-queues

    在Laravel框架中,队列(Queues)是一种强大的功能,用于处理耗时较长的任务,如发送电子邮件、处理大量数据或执行复杂的计算。通过将这些任务放到队列中,可以提高应用程序的响应速度,因为它们不会阻塞主线程,...

    Highly Available (Mirrored) Queues.docx

    【队列镜像(Mirrored Queues)概览】 队列镜像是RabbitMQ集群中经典队列(Classic Queues)的内容复制功能。另一种提供复制的队列类型是Quorum Queues,虽然本指南主要关注经典队列镜像,但强烈建议读者也阅读...

    A Safety Belt for Logistics Extraction Queues

    ### A Safety Belt for Logistics Extraction Queues #### 引言与背景 随着企业信息化水平的不断提高,物流数据在商业智能(BI)系统中的作用日益凸显。然而,在数据提取过程中,经常会遇到各种问题,如数据丢失、...

    java-leetcode题解之Implement Stack using Queues.java

    java java_leetcode题解之Implement Stack using Queues.java

    Chapter03-Stacks-and-Queues

    数据结构--C语言描述 Chapter03-Stacks-and-Queues英文课件

    Simple job queues for Python.zip

    在Python编程环境中,有时我们需要处理耗时的任务或者需要在后台执行一些操作,这时"Job Queues"就显得尤为重要。"Simple job queues for Python"通常指的是用于处理异步任务和后台工作的解决方案,它允许我们将任务...

    dyno-queues:Dyno Queues是一种使用Dynomite提供任务队列的方法

    Dyno Queues是一种使用提供任务队列的方法。 Dyno队列功能 基于时间的队列。 每个队列元素都有一个关联的时间戳,只有在该时间之后才会被轮询。 优先队列 没有严格的FIFO语义。 但是,在一个分片中,元素以FIFO的...

Global site tag (gtag.js) - Google Analytics