Categories
jQuery

jQuery — Callbacks

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *