国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 語言 > JavaScript > 正文

jquery隊列queue與原生模仿其實現方法分享

2024-05-06 16:03:11
字體:
來源:轉載
供稿:網友
jquery中的queue和dequeue是一組很有用的方法,他們對于一系列需要按次序運行的函數特別有用。特別animate動畫,ajax,以及timeout等需要一定時間的函數

queue() 方法顯示或操作在匹配元素上執行的函數隊列。

queue和dequeue的過程主要是:

用queue把函數加入隊列(通常是函數數組)
用dequeue將函數數組中的第一個函數取出,并執行(用shift()方法取出并執行)
也就意味著當再次執行dequeue的時候,得到的是另一個函數了。同時也意味著,如果不執行dequeue,那么隊列中的下一個函數永遠不會執行。

對于一個元素上執行animate方法加動畫,jQuery內部也會將其加入名為 fx 的函數隊列。而對于多個元素要依次執行動畫,則必須我們手動設置隊列進行了。

一個例子,要兩個div依次向左移動:

復制代碼 代碼如下:


<div>div 1</div>
<div>div 2</div>
<script type="text/javascript">
 var FUNC=[
  function() {$("#block1").animate({color:"=blue"},aniCB);},
  function() {$("#block2").animate({color:"=red"},aniCB);},
  function() {$("#block1").animate({color:"=yellow"},aniCB);},
  function() {$("#block2").animate({color:"=grey"},aniCB);},
  function() {$("#block1").animate({color:"=green"},aniCB);},
  function(){alert("動畫結束")}
 ];
 var aniCB=function() {
  $(document).dequeue("myAnimation");
 }
 $(document).queue("myAnimation",FUNC)
 //aniCB();
</script>

我首先建立了一個函數數組,里邊是一些列需要依次執行的動畫
然后我定義了一個回調函數,用dequeue方法用來執行隊列中的下一個函數
接著把這個函數數組放到document上的myAnimation的隊列中(可以選擇任何元素,我只是為了方便而把這個隊列放在document上)
最后我開始執行隊列中的第一個函數
這樣做的好處在于函數數組是線性展開,增減起來非常方便。而且,當不要要繼續進行接下來動畫的時候(比如用戶點了某個按鈕),只需要清空那個隊列即可。而要增加更多則只需要加入隊列即可。

復制代碼 代碼如下:


//清空隊列
$(document).queue("myAnimation",[]);
//加一個新的函數放在最后
$(document).queue(“myAnimation”,function(){alert("動畫真的結束了!")});

這當然也可以用于ajax之類的方法,如果需要一系列ajax交互,每個ajax都希望在前一個結束之后開始,之前最原始的方法就是用回調函數,但這樣太麻煩了。同樣利用queue添加隊列,每次ajax之后的回調中執行一次dequeue即可。

jQuery中動畫animate的隊列實現,下面用JavaScript模仿一個:

復制代碼 代碼如下:


function Queue(){
 this.a = [];
 this.t = null;
}
Queue.prototype = {
 queue:function(s){
  var self = this;
  this.a.push(s);
  this.hold();
  return this;
 },
 hold:function(){
  var self = this;
  clearTimeout(this.t);
  this.t = setTimeout(function(){
   console.log("Queue start! ",self.a);
   self.dequeue();
  },0);
 },
 dequeue:function(){
  var s = this.a.shift(),self = this;
  if(s){
   console.log("s:"+s);
   setTimeout(function(){
    console.log("end:"+s);
    self.dequeue();
   },s);
  }
 }
};
var a = new Queue().queue(500).queue(200).queue(400).queue(1500).queue(300).queue(2000);

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表

圖片精選

主站蜘蛛池模板: 桃园市| 江源县| 库车县| 松桃| 开鲁县| 云梦县| 赤壁市| 东山县| 大洼县| 兴山县| 当雄县| 深州市| 高尔夫| 旌德县| 射阳县| 明水县| 白城市| 永川市| 潞城市| 新乐市| 株洲县| 溧水县| 宽甸| 新津县| 远安县| 莫力| 丁青县| 长泰县| 阿鲁科尔沁旗| 金昌市| 土默特左旗| 阿拉尔市| 娄烦县| 镇雄县| 望谟县| 舟山市| 米林县| 新民市| 长子县| 清河县| 宝清县|