Callbacks分成五種，也就是$.Callbacks() 裡面可以放參數，
once、memory、unique、stopOnFalse 和預設(沒參數)，
參數裡的字不在這四種裡面，如xxx，視同預設
※預設
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.extend demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input type="button" value="click me" onclick="test()" />
</body>
<script>
function f1(arg) {
alert("1-" + arg);
return false; // 除了用「stopOnFalse」(後面會說明)，回傳什麼不受影響
}
function f2(arg) {
alert("2-" + arg);
}
function test(){
var callbacks = $.Callbacks();
callbacks.add(f1);
callbacks.fire("1");
callbacks.add(f2);
callbacks.fire("2");
}
</script>
</html>
結果：1-1-->1-2-->2-2
順序是紅-->藍-->綠
也就是每次執行fire方法時，會執行上次的add()+這次的fire參數，最後執行自己的
不一定要add方法，才能fire()，可以連用，如下：
callbacks.add(f1);
callbacks.fire("1");
callbacks.add(f2);
callbacks.fire("2");
callbacks.fire("3");
callbacks.fire("4");
結果：1-1-->1-2-->2-2--> 1-3-->2-3--> 1-4-->2-4
順序是圖1的順序，再加上紅-->藍-->綠-->黃
還可以用remove()，將裡面的方法移除，同一個方法也可以繼續add，但只要一remove()，就會就所有同名的方法移除
如下：
callbacks.add(f1);
callbacks.fire("1");
callbacks.add(f2);
callbacks.fire("2");
callbacks.add(f1);
callbacks.fire("3");
callbacks.remove(f1);
callbacks.fire("4");
結果：1-1-->1-2-->2-2--> 1-3-->2-3-->1-3--> 2-4
順序是圖1的順序，再加上紅-->藍-->綠-->黃
※once
var callbacks = $.Callbacks('once');
callbacks.add(f1);
callbacks.fire("1");
callbacks.add(f2);
callbacks.fire("2");
callbacks.fire("3");
callbacks.add(f1);
callbacks.fire("3");
xxx如同once這個單字，只會執行第一次add的方法名稱，和fire裡的參數，其他都不會執行，所以是1-1
※memory
var callbacks = $.Callbacks('memory');
callbacks.add(f1);
callbacks.fire("1");
callbacks.add(f2);
執行到第一次的fire方法，就會把它記起來，以後只要add方法，就會用記起來的參數自動執行，不用fire，所以是1-1-->2-1
當然要加fire還是可以，假如在最後一行加上callbacks.fire("2");
那結果就是1-1-->2-1-->1-2-->2-2
※unique
var callbacks = $.Callbacks('unique');
callbacks.add(f1);
callbacks.fire("1");
callbacks.add(f2);
callbacks.fire("2");
callbacks.add(f1);
callbacks.fire("3");
相同方法只會執行一次，也是是等同把第二次出現的callbacks.add(f1)刪除
結果為1-1-->1-2-->2-2-->1-3-->2-3
如果是預設的最後還會多一個1-3
※stopOnFalse
var callbacks = $.Callbacks('stopOnFalse');
callbacks.add(f1);
callbacks.fire("1");
callbacks.add(f2);
callbacks.fire("2");
callbacks.add(f1);
callbacks.fire("3");
f1方法回傳的是false，此功能就不會執行以後add進去的方法，就好像沒有第6、9行一樣
所以結果為1-1-->1-2-->1-3
※總結以上四個功能，不包括預設
once：只會執行第一次add的方法名稱，和fire裡的參數，其他都不會執行memory：執行到第一次的fire方法，就會把它記起來，以後只要add方法，就會用記起來的參數自動執行，不用fire
unique：相同方法只會執行一次
stopOnFalse：如果回傳false，就停止執行以後add進去的方法，但此方法還是會做完，不包括重覆的方法
這幾個功能還能連用，用空格隔開，如下：
var callbacks = $.Callbacks('memory once');
callbacks.add(f1);
callbacks.fire("1");
callbacks.add(f2);
callbacks.fire("2");
callbacks.add(f1);
callbacks.fire("3");
※順序不會影響結果，所以還有以下10種：
1.once memory：1-1-->2-1-->1-1
※變成add才有用，然後fire只有一次
2.once unique：1-1
3.once stopOnFalse：1-1
4.once memory unique：1-1-->2-1-->1-1
5.once memory stopOnFalse：1-1
6.once memory unique stopOnFalse：1-1
7.memory unique：1-1-->2-1-->1-2-->2-2-->1-3-->2-3
8.memory stopOnFalse：1-1-->1-2-->1-3
9.memory unique stopOnFalse：1-1-->1-2-->1-3
10.unique stopOnFalse：1-1-->1-2-->1-3
※其他方法
※disable()、disabled()
disable後就不能add了disabled()為判斷有沒有被disable過
var callbacks = $.Callbacks();
callbacks.add(f1);
callbacks.fire("1");
callbacks.add(f2);
console.log(callbacks.disabled()); // false
callbacks.disable();
console.log(callbacks.disabled()); // true
callbacks.fire("2");
callbacks.add(f1);
callbacks.fire("3");
※disable()後就都沒有作用了，所以是1-1
※如果是用memory，結果是1-1-->2-1
※remove(fn)、empty()
remove(fn)：此方法之前有add的，會移除add同名的方法empty()：此方法之前有add方法的，全部清空
此兩個方法之後當然還可以再add
var callbacks = $.Callbacks();
callbacks.add(f1);
callbacks.fire("1");
callbacks.add(f2);
callbacks.fire("2");
callbacks.empty();
callbacks.add(f2);
callbacks.fire("3");
callbacks.fire("4");
※1-1-->1-2-->2-2-->2-3-->2-4
※fired()
判斷有沒有呼叫過fire方法，就算清空也還是truevar callbacks = $.Callbacks();
callbacks.add(f1);
console.log(callbacks.fired()); // false
callbacks.fire("1");
console.log(callbacks.fired()); // true
callbacks.add(f2);
callbacks.fire("2");
callbacks.empty();
console.log(callbacks.fired()); // true
callbacks.add(f2);
callbacks.fire("3");
callbacks.fire("4");
※false-->1-1-->true-->1-2-->2-2-->true-->2-3-->2-4
※fireWith()
有兩個參數，都是可選的，第一個參數是context，第二個參數是對應方法的參數var callbacks = $.Callbacks();
callbacks.add(f1);
callbacks.fire("1");
callbacks.fireWith(window, ["w1"]);
callbacks.fireWith(document, ["p1"]);
callbacks.fireWith(["n1"]);
callbacks.add(f2);
callbacks.fire("2");
callbacks.fireWith(window, ["w1", "w2"]);
callbacks.fireWith(document, ["p1", "p2"]);
callbacks.fireWith(["n1", "n2"]);
※1-1-->1-w1-->1-p1-->1-undefined-->
1-2-->2-2-->1-w1-->2-w1-->
1-p1-->2-p1-->1-undefined-->2-undefined
※n1、n2，如果改成fireWith()，結果也是一樣
※lock()、locked()
lock()：鎖定之後，無法firelocked()：判斷有沒有鎖定
var callbacks = $.Callbacks();
callbacks.add(f1);
callbacks.fire("1");
callbacks.add(f2);
console.log(callbacks.locked()); // false
callbacks.lock();
console.log(callbacks.locked()); // true
callbacks.fire("2");
callbacks.fire("3");
※1-1-->false-->true
※如果用memory會是1-1-->2-1-->false-->true
※has(fn)
判斷方法有沒有add進去var callbacks = $.Callbacks();
callbacks.add(f1);
callbacks.fire("1");
console.log(callbacks.has(f2));
callbacks.add(f2);
console.log(callbacks.has(f2));
※1-1-->false-->true
沒有留言:
張貼留言