You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: entries/jQuery.Callbacks.xml
+57-52Lines changed: 57 additions & 52 deletions
Original file line number
Diff line number
Diff line change
@@ -15,47 +15,47 @@
15
15
<p>The following are two sample methods named <code>fn1</code> and <code>fn2</code>:</p>
16
16
<pre><code>
17
17
function fn1( value ) {
18
-
console.log( value );
18
+
console.log( value );
19
19
}
20
20
21
21
function fn2( value ) {
22
-
console.log("fn2 says: " + value);
23
-
return false;
22
+
console.log("fn2 says: " + value);
23
+
return false;
24
24
}
25
-
</code></pre>
25
+
</code></pre>
26
26
<p>These can be added as callbacks to a <code>$.Callbacks</code> list and invoked as follows:</p>
27
27
<pre><code>
28
28
var callbacks = $.Callbacks();
29
29
callbacks.add( fn1 );
30
30
31
-
// outputs: foo!
31
+
// Outputs: foo!
32
32
callbacks.fire( "foo!" );
33
33
34
34
callbacks.add( fn2 );
35
35
36
-
// outputs: bar!, fn2 says: bar!
36
+
// Outputs: bar!, fn2 says: bar!
37
37
callbacks.fire( "bar!" );
38
-
</code></pre>
38
+
</code></pre>
39
39
<p>The result of this is that it becomes simple to construct complex lists of callbacks where input values can be passed through to as many functions as needed with ease.</p>
40
40
<p>Two specific methods were being used above: <code>.add()</code> and <code>.fire()</code>. The <code>.add()</code> method supports adding new callbacks to the callback list, while the <code>.fire()</code> method executes the added functions and provides a way to pass arguments to be processed by the callbacks in the same list.</p>
41
41
<p>Another method supported by <code>$.Callbacks</code> is <code>.remove()</code>, which has the ability to remove a particular callback from the callback list. Here"s a practical example of <code>.remove()</code> being used:</p>
42
42
<pre><code>
43
43
var callbacks = $.Callbacks();
44
44
callbacks.add( fn1 );
45
45
46
-
// outputs: foo!
46
+
// Outputs: foo!
47
47
callbacks.fire( "foo!" );
48
48
49
49
callbacks.add( fn2 );
50
50
51
-
// outputs: bar!, fn2 says: bar!
51
+
// Outputs: bar!, fn2 says: bar!
52
52
callbacks.fire( "bar!" );
53
53
54
54
callbacks.remove( fn2 );
55
55
56
-
// only outputs foobar, as fn2 has been removed.
56
+
// Only outputs foobar, as fn2 has been removed.
57
57
callbacks.fire( "foobar" );
58
-
</code></pre>
58
+
</code></pre>
59
59
<h3id="supported-flags">Supported Flags</h3>
60
60
<p>The <code>flags</code> argument is an optional argument to <code>$.Callbacks()</code>, structured as a list of space-separated strings that change how the callback list behaves (eg. <code>$.Callbacks( "unique stopOnFalse" )</code>).</p>
<p>Because <code>$.Callbacks()</code> supports a list of flags rather than just one, setting several flags has a cumulative effect similar to "&&". This means it's possible to combine flags to create callback lists that, say, both are <i>unique</i> and <i>ensure if list was already fired, adding more callbacks will have it called with the latest fired value</i> (i.e. <code>$.Callbacks("unique memory")</code>).</p>
<p>The methods of <code>$.Callbacks</code> can also be detached, should there be a need to define short-hand versions for convenience:</p>
185
187
<pre><code>
186
188
var callbacks = $.Callbacks(),
187
-
add = callbacks.add,
188
-
remove = callbacks.remove,
189
-
fire = callbacks.fire;
189
+
add = callbacks.add,
190
+
remove = callbacks.remove,
191
+
fire = callbacks.fire;
190
192
191
193
add( fn1 );
192
194
fire( "hello world" );
193
195
remove( fn1 );
194
-
</code></pre>
196
+
</code></pre>
195
197
<h3id="pubsub">$.Callbacks, $.Deferred and Pub/Sub</h3>
196
198
<p>The general idea behind pub/sub (Publish/Subscribe, or, the Observer pattern) is the promotion of loose coupling in applications. Rather than single objects calling on the methods of other objects, an object instead subscribes to a specific task or activity of another object and is notified when it occurs. Observers are also called Subscribers, and we refer to the object being observed as the Publisher (or the subject). Publishers notify subscribers when events occur.</p>
197
199
<p>To demonstrate the component-creation capabilities of <code>$.Callbacks()</code>, it's possible to implement a Pub/Sub system using only callback lists. Using <code>$.Callbacks</code> as a topics queue, a system for publishing and subscribing to topics can be implemented as follows:</p>
198
-
<pre><code>var topics = {};
200
+
<pre><code>
201
+
var topics = {};
199
202
200
203
jQuery.Topic = function( id ) {
201
-
var callbacks,
202
-
method,
203
-
topic = id && topics[ id ];
204
+
var callbacks,
205
+
method,
206
+
topic = id && topics[ id ];
204
207
205
-
if ( !topic ) {
206
-
callbacks = jQuery.Callbacks();
207
-
topic = {
208
-
publish: callbacks.fire,
209
-
subscribe: callbacks.add,
210
-
unsubscribe: callbacks.remove
211
-
};
212
-
if ( id ) {
213
-
topics[ id ] = topic;
214
-
}
208
+
if ( !topic ) {
209
+
callbacks = jQuery.Callbacks();
210
+
topic = {
211
+
publish: callbacks.fire,
212
+
subscribe: callbacks.add,
213
+
unsubscribe: callbacks.remove
214
+
};
215
+
if ( id ) {
216
+
topics[ id ] = topic;
215
217
}
216
-
return topic;
218
+
}
219
+
return topic;
217
220
};
218
-
</code></pre>
221
+
</code></pre>
219
222
<p>This can then be used by parts of your application to publish and subscribe to events of interest quite easily:</p>
220
-
<pre><code>// Subscribers
223
+
<pre><code>
224
+
// Subscribers
221
225
$.Topic( "mailArrived" ).subscribe( fn1 );
222
226
$.Topic( "mailArrived" ).subscribe( fn2 );
223
227
$.Topic( "mailSent" ).subscribe( fn1 );
@@ -237,18 +241,19 @@ hello world!
237
241
fn2 says: hello world!
238
242
woo! mail!
239
243
*/
240
-
</code></pre>
244
+
</code></pre>
241
245
<p>While this is useful, the implementation can be taken further. Using <code>$.Deferreds</code>, it's possible to ensure publishers only publish notifications for subscribers once particular tasks have been completed (resolved). See the below code sample for some further comments on how this could be used in practice:</p>
242
-
<pre><code>// subscribe to the mailArrived notification
246
+
<pre><code>
247
+
// Subscribe to the mailArrived notification
243
248
$.Topic( "mailArrived" ).subscribe( fn1 );
244
249
245
-
// create a new instance of Deferreds
250
+
// Create a new instance of Deferreds
246
251
var dfd = $.Deferred();
247
252
248
-
// define a new topic (without directly publishing)
253
+
// Define a new topic (without directly publishing)
249
254
var topic = $.Topic( "mailArrived" );
250
255
251
-
// when the deferred has been resolved, publish a
256
+
// When the deferred has been resolved, publish a
252
257
// notification to subscribers
253
258
dfd.done( topic.publish );
254
259
@@ -259,7 +264,7 @@ dfd.done( topic.publish );
259
264
// messages are only published once the task has actually
Copy file name to clipboardExpand all lines: entries/jQuery.Deferred.xml
+4-4Lines changed: 4 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -17,15 +17,15 @@
17
17
<desc> A constructor function that returns a chainable utility object with methods to register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.</desc>
18
18
<longdesc>
19
19
<p>The <code>jQuery.Deferred()</code> constructor creates a new Deferred object. The <code>new</code> operator is optional.</p>
20
-
<p>The <code>jQuery.Deferred</code> method can be passed an optional function, which is called just before the constructor returns and is passed the constructed <code>deferred</code> object as both the <code>this</code> object and as the first argument to the function. The called function can attach callbacks using <ahref="/deferred.then"><code>deferred.then()</code></a>, for example.</p>
21
-
<p>A Deferred object starts in the <em>pending</em> state. Any callbacks added to the object with <a href="/deferred.then"><code>deferred.then()</code></a>, <a href="/deferred.always"><code>deferred.always()</code></a>, <a href="/deferred.done"><code>deferred.done()</code></a>, or <a href="/deferred.fail"><code>deferred.fail()</code></a> are queued to be executed later. Calling <a href="/deferred.resolve"><code>deferred.resolve()</code></a> or <a href="/deferred.resolveWith"><code>deferred.resolveWith()</code></a> transitions the Deferred into the <em>resolved</em> state and immediately executes any <code>doneCallbacks</code> that are set. Calling <a href="/deferred.reject"><code>deferred.reject()</code></a> or <a href="/deferred.rejectWith"><code>deferred.rejectWith()</code></a> transitions the Deferred into the <em>rejected</em> state and immediately executes any <code>failCallbacks</code> that are set. Once the object has entered the resolved or rejected state, it stays in that state. Callbacks can still be added to the resolved or rejected Deferred — they will execute immediately.</p>
20
+
<p>The <code>jQuery.Deferred</code> method can be passed an optional function, which is called just before the constructor returns and is passed the constructed <code>deferred</code> object as both the <code>this</code> object and as the first argument to the function. The called function can attach callbacks using <ahref="/deferred.then/"><code>deferred.then()</code></a>, for example.</p>
21
+
<p>A Deferred object starts in the <em>pending</em> state. Any callbacks added to the object with <a href="/deferred.then/"><code>deferred.then()</code></a>, <a href="/deferred.always/"><code>deferred.always()</code></a>, <a href="/deferred.done/"><code>deferred.done()</code></a>, or <a href="/deferred.fail/"><code>deferred.fail()</code></a> are queued to be executed later. Calling <a href="/deferred.resolve/"><code>deferred.resolve()</code></a> or <a href="/deferred.resolveWith/"><code>deferred.resolveWith()</code></a> transitions the Deferred into the <em>resolved</em> state and immediately executes any <code>doneCallbacks</code> that are set. Calling <a href="/deferred.reject/"><code>deferred.reject()</code></a> or <a href="/deferred.rejectWith/"><code>deferred.rejectWith()</code></a> transitions the Deferred into the <em>rejected</em> state and immediately executes any <code>failCallbacks</code> that are set. Once the object has entered the resolved or rejected state, it stays in that state. Callbacks can still be added to the resolved or rejected Deferred — they will execute immediately.</p>
22
22
<h4>
23
23
Enhanced Callbacks with jQuery Deferred
24
24
</h4>
25
25
<p>In JavaScript it is common to invoke functions that optionally accept callbacks that are called within that function. For example, in versions prior to jQuery 1.5, asynchronous processes such as <code>jQuery.ajax()</code> accept callbacks to be invoked some time in the near-future upon success, error, and completion of the ajax request.</p>
26
26
<p><code>jQuery.Deferred()</code> introduces several enhancements to the way callbacks are managed and invoked. In particular, <code>jQuery.Deferred()</code> provides flexible ways to provide multiple callbacks, and these callbacks can be invoked regardless of whether the original callback dispatch has already occurred. jQuery Deferred is based on the <ahref="http://wiki.commonjs.org/wiki/Promises/A">CommonJS Promises/A</a> design.</p>
27
-
<p>One model for understanding Deferred is to think of it as a chain-aware function wrapper. The <ahref="/deferred.then"><code>deferred.then()</code></a>, <ahref="/deferred.always"><code>deferred.always()</code></a>, <ahref="/deferred.done"><code>deferred.done()</code></a>, and <ahref="/deferred.fail"><code>deferred.fail()</code></a> methods specify the functions to be called and the <ahref="/deferred.resolve"><code>deferred.resolve(args)</code></a> or <ahref="/deferred.reject"><code>deferred.reject(args)</code></a> methods "call" the functions with the arguments you supply. Once the Deferred has been resolved or rejected it stays in that state; a second call to <code>deferred.resolve()</code>, for example, is ignored. If more functions are added by <code>deferred.then()</code>, for example, after the Deferred is resolved, they are called immediately with the arguments previously provided.</p>
28
-
<p>In most cases where a jQuery API call returns a Deferred or Deferred-compatible object, such as <ahref="/jQuery.ajax"><code>jQuery.ajax()</code></a> or <ahref="/jQuery.when"><code>jQuery.when()</code></a>, you will only want to use the <ahref="/deferred.then"><code>deferred.then()</code></a>, <ahref="/deferred.done"><code>deferred.done()</code></a>, and <ahref="/deferred.fail"><code>deferred.fail()</code></a> methods to add callbacks to the Deferred's queues. The internals of the API call or code that created the Deferred will invoke <ahref="/deferred.resolve"><code>deferred.resolve()</code></a> or <ahref="/deferred.reject"><code>deferred.reject()</code></a> on the deferred at some point, causing the appropriate callbacks to run.</p>
27
+
<p>One model for understanding Deferred is to think of it as a chain-aware function wrapper. The <ahref="/deferred.then/"><code>deferred.then()</code></a>, <ahref="/deferred.always/"><code>deferred.always()</code></a>, <ahref="/deferred.done/"><code>deferred.done()</code></a>, and <ahref="/deferred.fail/"><code>deferred.fail()</code></a> methods specify the functions to be called and the <ahref="/deferred.resolve/"><code>deferred.resolve(args)</code></a> or <ahref="/deferred.reject/"><code>deferred.reject(args)</code></a> methods "call" the functions with the arguments you supply. Once the Deferred has been resolved or rejected it stays in that state; a second call to <code>deferred.resolve()</code>, for example, is ignored. If more functions are added by <code>deferred.then()</code>, for example, after the Deferred is resolved, they are called immediately with the arguments previously provided.</p>
28
+
<p>In most cases where a jQuery API call returns a Deferred or Deferred-compatible object, such as <ahref="/jQuery.ajax/"><code>jQuery.ajax()</code></a> or <ahref="/jQuery.when/"><code>jQuery.when()</code></a>, you will only want to use the <ahref="/deferred.then/"><code>deferred.then()</code></a>, <ahref="/deferred.done/"><code>deferred.done()</code></a>, and <ahref="/deferred.fail/"><code>deferred.fail()</code></a> methods to add callbacks to the Deferred's queues. The internals of the API call or code that created the Deferred will invoke <ahref="/deferred.resolve/"><code>deferred.resolve()</code></a> or <ahref="/deferred.reject/"><code>deferred.reject()</code></a> on the deferred at some point, causing the appropriate callbacks to run.</p>
0 commit comments