How to check the lock state of a callback list using jQuery?

Front End TechnologyjQueryWeb Development

In this tutorial, we will learn how to check the lock-state of a callback list using jQuery. The lock is a callback list in jQuery in the current state. We can toggle the lock state so that additional changes cannot be made unless required.

Syntax

The callbacks list is locked and checked as follows −

// Get callbacks list at current state
var callbacks = $.Callbacks()

// Lock the callbacks list
callbacks.lock()

// Check callbacks is locked or not
console.log(callbacks.locked())

Algorithm

  • First we receive the callbacks list at the current state using the Callbacks() function.

  • Then we lock it using the lock() function and check if it is locked or not using the locked() function. It returns a boolean value.

Example 1

In the following example, we fire the callbacks list and then lock it. The messages are displayed accordingly.

<!DOCTYPE html>
<html>
<head>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <title>TutorialsPoint | jQuery</title>
</head>
<body>
   <center>
      <h1>TutorialsPoint</h1>
      <strong>How to check the lock-state of a callback list using jQuery?</strong>
      <br />
      <br />
      <button onclick="lockCallbacks()">
         Lock Callbacks List
      </button>
      <div id="message"></div>
   </center>
   <script>
      function myFunc(value) {
         document.getElementById(
            'message',
         ).innerHTML += `<p>My Function Loaded: ${value}</p>`
      }
      // Get callbacks list at current state
      var callbacks = $.Callbacks()
      callbacks.add(myFunc)
      callbacks.fire('Tutorials Point')
      function lockCallbacks() {
         // Lock the callbacks list
         callbacks.lock()
         // Check callbacks is locked or not
         console.log(callbacks.locked())
         document.getElementById(
            'message',
         ).innerHTML += `<p>Callbacks locked: ${callbacks.locked()}</p>`
      }
      // true
   </script>
</body>
</html>

Example 2

In the following example, we trigger and lock the callbacks list using the buttons.

<!DOCTYPE html>
<html>
<head>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <title>TutorialsPoint | jQuery</title>
</head>
<body>
   <center>
      <h1>TutorialsPoint</h1>
      <strong>How to check the lock-state of a callback list using jQuery?</strong>
      <br />
      <br />
      <button onclick="fireCallback()">
         Fire Callbacks List
      </button>
      <button onclick="lockCallbacks()">
         Lock Callbacks List
      </button>
      <p>Callbacks locked:
         <div id="lockM"></div>
      </p>
      <div id="message"></div>
   </center>
   <script>
      function myFunc(value) {
         document.getElementById(
            'message',
         ).innerHTML += `<p>My Function Loaded: ${value}</p>`
      }

      // Get callbacks list at current state
      var callbacks = $.Callbacks()
      document.getElementById(
         'lockM',
      ).innerHTML = `${callbacks.locked()}`
      callbacks.add(myFunc)
      function fireCallback() {
         callbacks.fire('Tutorials Point')
      }
      function lockCallbacks() {
         // Lock the callbacks list
         callbacks.lock()
         // Check callbacks is locked or not
         console.log(callbacks.locked())
         document.getElementById(
            'lockM',
         ).innerHTML = `${callbacks.locked()}`
      }
      // true
   </script>
</body>
</html>
raja
Updated on 20-Jul-2022 12:18:54

Advertisements