如何讓多個(gè) JavaScript 動(dòng)畫(huà)按一定的順序排隊(duì)執(zhí)行

其實(shí)這個(gè)和JavaScript沒(méi)有太多關(guān)系，所有的程序設(shè)計(jì)都會(huì)遇到這樣的問(wèn)題。就是多個(gè)操作或者運(yùn)算需要按照一定的順序依次執(zhí)行，這樣就需要一個(gè)隊(duì)列來(lái)處理。就像在銀行排隊(duì)取錢(qián)一樣，某一個(gè)操作需要到達(dá)隊(duì)伍的最前端之后才能執(zhí)行。

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)建站推出長(zhǎng)垣免費(fèi)做網(wǎng)站回饋大家。

在JavaScript中利用基礎(chǔ)的Array對(duì)象就可以構(gòu)造一個(gè)簡(jiǎn)單的隊(duì)列。可以將每一次的動(dòng)畫(huà)效果作為一個(gè)基本元操作，每觸發(fā)一次就放入隊(duì)列中，如果在隊(duì)列頂端那么就直接執(zhí)行，否則就等待。每當(dāng)一個(gè)操作執(zhí)行完成之后就觸發(fā)隊(duì)列頂端的操作，這樣就能夠按照隊(duì)列依次執(zhí)行完畢了。

如何用js實(shí)現(xiàn)堆棧/隊(duì)列的數(shù)據(jù)結(jié)構(gòu)

2.因?yàn)槟愕膯?wèn)題形容的比較模糊，所以補(bǔ)充信息給出你的答案。首先定義隊(duì)列一定要說(shuō)是單向循環(huán)隊(duì)列，還是雙向循環(huán)隊(duì)列，你這里沒(méi)有指出就默認(rèn)是單向循環(huán)。2.1何時(shí)隊(duì)列滿。當(dāng)新的結(jié)點(diǎn)進(jìn)入隊(duì)列的時(shí)候，那么當(dāng)前的length+1當(dāng)你的length=MAXlength;是代表該隊(duì)列是滿。2.2入隊(duì)列，根據(jù)隊(duì)列的定義如果入隊(duì)列只能在尾巴處加入。新節(jié)點(diǎn)是node;node-next=rear-next;rear-next=node;2.3出隊(duì)列，根據(jù)隊(duì)列的定義如果出隊(duì)列只能在頭結(jié)點(diǎn)出。temp=rear-next;rear-next=rear-next-next;free(temp);3.首先假設(shè)兩個(gè)棧是等長(zhǎng)的，那么隊(duì)列慢的判斷條件的是兩個(gè)棧中的結(jié)點(diǎn)和，等于一個(gè)棧的容量的時(shí)候，就代表隊(duì)列滿了！當(dāng)兩個(gè)棧不等長(zhǎng)的時(shí)候，兩個(gè)棧中的結(jié)點(diǎn)和等于較小的棧的長(zhǎng)度隊(duì)列就滿了。以較小的棧作為隊(duì)列存放棧，長(zhǎng)的棧作為輔助棧。3.1出隊(duì)列從棧頂去除結(jié)點(diǎn)即可。3.2入隊(duì)列，將短棧內(nèi)的元素，一次入長(zhǎng)棧，然后將新元素，壓入短棧，再將長(zhǎng)棧中的元素一次入短棧。即完成了入棧。

JavaScript中的Timer是怎么工作的

通常它們的表現(xiàn)行為并不是那么地直觀，而這是因?yàn)樗鼈兌继幵谝粋€(gè)單一線程中。讓我們先來(lái)看一看三個(gè)用來(lái)創(chuàng)建以及操作timer的函數(shù)。 var id = setTimeout(fn, delay); - 初始化一個(gè)單一的timer，這個(gè)timer將會(huì)在一定延時(shí)后去調(diào)用指定的函數(shù)。這個(gè)函數(shù)（setTimeout）將返回一個(gè)唯一的ID，我們可以通過(guò)這個(gè)ID來(lái)取消timer。 var id = setInterval(fn, delay); - 與setTimeout類(lèi)似，只不過(guò)它會(huì)持續(xù)地調(diào)用指定的函數(shù)（每次都有一個(gè)延時(shí)），直到timer被取消為止。 clearInterval(id);, clearTimeout(id); - 接受一個(gè)timer的ID（由上述的兩個(gè)函數(shù)返回的），并且停止timer的回調(diào)事件。 （點(diǎn)擊查看大圖） 由于JavaScript向來(lái)都只能在同一時(shí)間執(zhí)行一塊代碼（這是由它單線程的本質(zhì)決定的），所以每一個(gè)代碼塊都阻塞了其他的異步事件。這意味著當(dāng)異步事件發(fā)生時(shí)（比如鼠標(biāo)點(diǎn)擊、timer觸發(fā)或者是XMLHttpRequest完成），這些事件將進(jìn)入到一個(gè)隊(duì)列中等待執(zhí)行（隊(duì)列的實(shí)現(xiàn)方法因?yàn)g覽器而異，我們?cè)诖酥挥懻撘粋€(gè)簡(jiǎn)化的情況）。 剛開(kāi)始，在第一個(gè)JavaScript塊中，有兩個(gè)timer被初始化了：一個(gè)10ms的setTimeout和一個(gè)是10ms的setInterval。由于timer（這里的timer指setTimeout中的timer，而下文中的interval則指setInvertal中的timer）開(kāi)始的時(shí)間，實(shí)際上它在第一個(gè)代碼塊結(jié)束前就已經(jīng)觸發(fā)了。然而請(qǐng)注意，它并不會(huì)馬上執(zhí)行（事實(shí)上由于單線程的存在，它也無(wú)法做到馬上執(zhí)行）。相反的，這個(gè)被延期執(zhí)行的函數(shù)進(jìn)入隊(duì)列中，等待在空閑的時(shí)候被執(zhí)行。 當(dāng)?shù)谝粋€(gè)JavaScript塊被執(zhí)行完之后，瀏覽器問(wèn)了一個(gè)問(wèn)題：有正在等待被執(zhí)行的代碼嗎？在這個(gè)例子中，鼠標(biāo)點(diǎn)擊事件和time事件都正在隊(duì)列中等待。于是瀏覽器選了一個(gè)（鼠標(biāo)點(diǎn)擊事件），然后馬上執(zhí)行它。而timer只能繼續(xù)等下去。 注意當(dāng)鼠標(biāo)點(diǎn)擊事件正在執(zhí)行的時(shí)候第一次的interval事件也觸發(fā)了，與timer一樣，它的事件也進(jìn)入隊(duì)列等待之后執(zhí)行。然而，注意，當(dāng)interval再次觸發(fā)的時(shí)候（這個(gè)時(shí)候timer的事件正在執(zhí)行），這一次它的事件被丟棄了。如果你在一個(gè)大的JavaScript代碼塊正在執(zhí)行的時(shí)候把所有的interval回調(diào)函數(shù)都囤起來(lái)的話，其結(jié)果就是在JavaScript代碼塊執(zhí)行完了之后會(huì)有一堆的interval事件被執(zhí)行，而執(zhí)行過(guò)程中不會(huì)有間隔。因此，取代的作法是瀏覽器情愿先等一等，以確保在一個(gè)interval進(jìn)入隊(duì)列的時(shí)候隊(duì)列中沒(méi)有別的interval。 讓我們來(lái)看一個(gè)例子，這個(gè)例子更好地闡釋了setTimeout和setInveral之間的區(qū)別。 setTimeout(function(){ /* 一個(gè)很長(zhǎng)的代碼塊 */setTimeout(arguments. callee,10);},10); 我們?cè)诖藢W(xué)到了很多，讓我們重述一下： JavaScript引擎只有一個(gè)線程，這使得異步事件必需列隊(duì)等待執(zhí)行。 setTimeout和 如果一個(gè)timer在將要執(zhí)行的時(shí)候被阻塞，它將會(huì)等待下一個(gè)時(shí)機(jī)（比預(yù)期的延時(shí)要長(zhǎng)）。

JavaScript如何用數(shù)組實(shí)現(xiàn)隊(duì)列問(wèn)題

1.1. 隊(duì)列的數(shù)據(jù)結(jié)構(gòu)

隊(duì)列是一種特殊的線性表，特殊之處在于它只允許在表的前端（front）進(jìn)行刪除操作，而在表的后端（rear）進(jìn)行插入操作，和棧一樣，隊(duì)列是一種操作受限制的線性表。進(jìn)行插入操作的端稱為隊(duì)尾，進(jìn)行刪除操作的端稱為隊(duì)頭。

1.2. Java實(shí)現(xiàn)

QueueTest

package ch04;

public class QueueTest {

public static void main(String[] args) {

ArrayQueue queue = new ArrayQueue(10);

System.out.println(queue.isEmpty());

for (int i = 0; i 10; i++) {

queue.insert(i);

}

System.out.println(queue.isFull());

while (!queue.isEmpty()) {

System.out.println(queue.remove());

}

}

}

class ArrayQueue {

private int[] arrInt;// 內(nèi)置數(shù)組

private int front;// 頭指針

private int rear;// 尾指針

public ArrayQueue(int size) {

this.arrInt = new int[size];

front = 0;

rear = -1;

}

/**

* 判斷隊(duì)列是否為空

*

* @return

*/

public boolean isEmpty() {

return front == arrInt.length;

}

/**

* 判斷隊(duì)列是否已滿

*

* @return

*/

public boolean isFull() {

return arrInt.length - 1 == rear;

}

/**

* 向隊(duì)列的隊(duì)尾插入一個(gè)元素

*/

public void insert(int item) {

if (isFull()) {

throw new RuntimeException("隊(duì)列已滿");

}

arrInt[++rear] = item;

}

/**

* 獲得對(duì)頭元素

*

* @return

*/

public int peekFront() {

return arrInt[front];

}

/**

* 獲得隊(duì)尾元素

*

* @return

*/

public int peekRear() {

return arrInt[rear];

}

/**

* 從隊(duì)列的對(duì)頭移除一個(gè)元素

*

* @return

*/

public int remove() {

if (isEmpty()) {

throw new RuntimeException("隊(duì)列為空");

}

return arrInt[front++];

}

}

運(yùn)行結(jié)果如下:

false

true

1

2

3

4

5

6

7

8

9

當(dāng)前標(biāo)題：javascript列隊(duì),任務(wù)隊(duì)列 js
分享網(wǎng)址：http://chinadenli.net/article4/dsgiiie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、做網(wǎng)站、網(wǎng)站制作、全網(wǎng)營(yíng)銷(xiāo)推廣、微信小程序、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)