[jQuery] 製作 $.fn.delayAll

jQuery 有提供 delay 這個方法，可惜只能用在動畫操作上，想要做到下面的事情就只能用 setTimeout 了。

原始碼

1. // not working 
2. $('div').css('color','red').delay(200).css('color','blue'); 
3.  
4.  
5. // use setTimeout 
6. $('div').css('color','red'); 
7.  
8. setTimeout(function(){ 
9.    $('div').css('color','blue'); 
10. }, 200); 

// not working
$('div').css('color','red').delay(200).css('color','blue');


// use setTimeout
$('div').css('color','red');

setTimeout(function(){
    $('div').css('color','blue');
}, 200);

稍微研究了一下，發現 jQuery 本身有製作 queue 的功能，這個用來存放 delay 後要執行動作的紀錄器，最後只要對 jQuery Object 作一個代理器的包裝，就可以達到想要的目的了。

原始碼

1. var queueName = 'delayAll'; 
2.  
3. /*定義 jQuery Delay 代理類別*/ 
4. function jQueryDelay(jqObject, duration){ 
5.    /*將缺少的成員屬性補上*/ 
6.    for(var member in jqObject){ 
7.        if(!$.isFunction(jqObject[member]) || !this[member]){ 
8.            this[member] = jqObject[member]; 
9.        } 
10.    } 
11.  
12.    /*新增 delay 時間並啟動 queue*/ 
13.    jqObject 
14.        .delay(duration, queueName) 
15.        .dequeue(queueName); 
16.  
17.    /*紀錄 jQuery 物件*/ 
18.    this._jqObject = jqObject; 
19. }; 
20.  
21.  
22. /*為所有的 jQuery 方法製作 proxy*/ 
23. for(var member in $.fn){ 
24.    if(!$.isFunction($.fn[member])){ continue; } 
25.  
26.    jQueryDelay.prototype[member] = function(){ 
27.        var jqObject = this._jqObject; 
28.        var args = Array.prototype.slice.call(arguments); 
29.        var mothed = arguments.callee.methodName; 
30.  
31.        /*將需要執行動作加入 queue*/ 
32.        jqObject.queue(queueName, function(next) { 
33.            jqObject[mothed].apply(jqObject, args); 
34.            next(); 
35.        }); 
36.  
37.        return this; 
38.    }; 
39.  
40.    /*紀錄方法名稱，在 proxy 時會需要參考到*/ 
41.    jQueryDelay.prototype[member].methodName = member; 
42. } 
43.  
44.  
45. /*允許多次串接的可能*/ 
46. jQueryDelay.prototype.delayAll = function(duration){ 
47.    this._jqObject.delay(duration, queueName); 
48.    return this; 
49. }; 
50.  
51.  
52. /*用 jQueryDelay 將原本的 jQuery Object 包裝起來*/ 
53. $.fn.delayAll = function(duration){ 
54.    return new jQueryDelay(this ,duration); 
55. }; 

var queueName = 'delayAll';

/*定義 jQuery Delay 代理類別*/
function jQueryDelay(jqObject, duration){
    /*將缺少的成員屬性補上*/
    for(var member in jqObject){
        if(!$.isFunction(jqObject[member]) || !this[member]){
            this[member] = jqObject[member];
        }
    }

    /*新增 delay 時間並啟動 queue*/
    jqObject
        .delay(duration, queueName)
        .dequeue(queueName);

    /*紀錄 jQuery 物件*/
    this._jqObject = jqObject;
};


/*為所有的 jQuery 方法製作 proxy*/
for(var member in $.fn){
    if(!$.isFunction($.fn[member])){ continue; }

    jQueryDelay.prototype[member] = function(){
        var jqObject = this._jqObject;
        var args = Array.prototype.slice.call(arguments);
        var mothed = arguments.callee.methodName;

        /*將需要執行動作加入 queue*/
        jqObject.queue(queueName, function(next) {
            jqObject[mothed].apply(jqObject, args);
            next();
        });

        return this;
    };

    /*紀錄方法名稱，在 proxy 時會需要參考到*/
    jQueryDelay.prototype[member].methodName = member;
}


/*允許多次串接的可能*/
jQueryDelay.prototype.delayAll = function(duration){
    this._jqObject.delay(duration, queueName);
    return this;
};


/*用 jQueryDelay 將原本的 jQuery Object 包裝起來*/
$.fn.delayAll = function(duration){
    return new jQueryDelay(this ,duration);
};

使用範例：

原始碼

1. $('div').css('color','#f00') 
2.    .delayAll(2000).css('color','#0f0') 
3.    .delayAll(2000).css('color','#00f'); 

$('div').css('color','#f00')
    .delayAll(2000).css('color','#0f0')
    .delayAll(2000).css('color','#00f');

檔案下載：jquery.delayAll.js