jQuery is a popular JavaScript for creating dynamic web pages.
In this article, we’ll look at how to using jQuery in our web apps.
callbacks.disable()
We can call callbacks.disable to disable a callback.
For example, if we have:
const foo = function(value) {
console.log(`foo: ${value}`);
};
const callbacks = $.Callbacks();
callbacks.add(foo);
callbacks.fire("hello");
callbacks.disable();
callbacks.fire("world");
Then we call callbacks.disable to stop the list of callbacks from being called again.
Therefore, we only see:
foo: hello
logged.
callbacks.disabled()
We can use the callbacks.disabled() method to check if callbacks have been disabled.
For example, we can write:
const foo = function(value) {
console.log(`foo: ${value}`);
};
const callbacks = $.Callbacks();
callbacks.add(foo);
callbacks.fire("hello");
callbacks.disable();
console.log(callbacks.disabled());
callbacks.fire("world");
Since we called callbacks.disable , callbacks.disabled should log true .
callbacks.empty()
The callbacks.empty() method removes all callbacks from the list.
For example, we can write:
const foo = function(value) {
console.log(`foo: ${value}`);
};
const bar = function(value) {
console.log(`bar: ${value}`);
};
const callbacks = $.Callbacks();
callbacks.add(foo);
callbacks.add(bar);
callbacks.empty();
console.log(callbacks.has(foo));
console.log(callbacks.has(bar));
Since we called callbacks.empty to remove all callbacks, then both console logs should log false since both callbacks have been removed by empty .
callbacks.fire()
The callbacks.fire() method lets us call all callbacks on the list with the given argument.
For example, we can write:
const foo = function(value) {
console.log(`foo: ${value}`);
};
const bar = function(value) {
console.log(`bar: ${value}`);
};
const callbacks = $.Callbacks();
callbacks.add(foo);
callbacks.fire("hello");
callbacks.fire("world");
callbacks.add(bar);
callbacks.fire("hello again");
We added the foo callback and called fire with 'hello' and 'world' , so we should get:
foo: hello
foo: world
logged.
Then we added bar to the callbacks list and called fire with 'hello again' .
So we get:
foo: hello again
bar: hello again
logged.
callbacks.fired()
We can check is the callback has been fired at least once with the callbacks.fired() method.
For example, we can write:
const foo = function(value) {
console.log(`foo: ${value}`);
};
const callbacks = $.Callbacks();
callbacks.add(foo);
callbacks.fire("hello");
callbacks.fire("world");
console.log(callbacks.fired());
to log is any callbacks have been called with fired .
Since it’s been called, it should log true .
callbacks.fireWith()
The callbacks.fireWith() method lets us call a callback with the given context and arguments.
For example, if we have:
const log = function(value1, value2) {
console.log(this, value1, value2);
};
const callbacks = $.Callbacks();
callbacks.add(log);
callbacks.fireWith(window, ["foo", "bar"]);
Then this is window , value1 is foo and value2 is bar .
callbacks.has()
The callbacks.has() method lets us check whether the callbacks list has any callbacks attached.
For example, we can write:
const log = function(value1, value2) {
console.log(this, value1, value2);
};
const callbacks = $.Callbacks();
callbacks.add(log);
console.log(callbacks.has(log));
The console log should log true since we added it with add .
callbacks.lock()
The callbacks.lock() method locks the callbacks list in its current state.
For example, we can use it by writing:
const foo = function(value) {
console.log(`foo: ${value}`);
};
const callbacks = $.Callbacks();
callbacks.add(foo);
callbacks.fire("hello");
callbacks.lock();
callbacks.fire("world");
We call the callbacks.lock method to prevent any callbacks from being called.
So we only have:
foo: hello
logged.
Conclusion
We can do many things with callbacks with jQuery.
