Leveraging Caching and Deferred Objects

Boost Performance with Caching & Deferreds

Why Selector Caching Matters

Store Your Selections

// Imagine this is in your HTML
// <div id="myDiv">Hello</div>

// Simulate jQuery selecting an element
// In a real browser, this would return a jQuery object
const $myElement = {
  id: "myDiv",
  text: "Hello",
  // Simulate jQuery methods
  css: function(prop, value) {
    console.log(`Setting ${prop} to ${value} on #${this.id}`);
  },
  addClass: function(cls) {
    console.log(`Adding class "${cls}" to #${this.id}`);
  }
};

console.log("--- Without Caching (simulated) ---");
// This would ideally re-query the DOM
$myElement.css("color", "blue"); // Simulates $("#myDiv").css(...)
$myElement.addClass("highlight"); // Simulates $("#myDiv").addClass(...)

console.log("\n--- With Caching ---");
// We already have $myElement, so no re-query
$myElement.css("font-weight", "bold");
$myElement.addClass("active");

Chaining for Efficiency

// Chaining is good for sequential ops
$("#myElement")
  .addClass("active")
  .css("color", "blue")
  .fadeIn();

// Caching is better for repeated, non-sequential ops
const $cachedElement = $("#myElement");
// Later in code...
$cachedElement.trigger("click");
// Even later...
$cachedElement.removeClass("active");

Reusing Selections

// Imagine HTML: <li class="item">1</li> <li class="item">2</li>
// <li class="item">3</li> <button id="toggleBtn">Toggle</button>

// Simulate jQuery context
const $items = [{
  text: "Item 1"
}, {
  text: "Item 2"
}];
const $toggleButton = {
  text: "Toggle Button"
};

console.log("Cached items count:", $items.length);
console.log("Cached button text:", $toggleButton.text);

// Later, you might need them again, without re-querying
// e.g., in an event handler
function handleToggle() {
  // Use $items and $toggleButton directly
  console.log("Toggle button clicked! Working with cached items.");
}

// Call the function
handleToggle();

Managing Asynchronous Operations

Making a New Deferred

function doSomethingAsync() {
  const dfd = $.Deferred(); // Create a new Deferred

  setTimeout(function() {
    const success = Math.random() > 0.5; // Simulate success/failure
    if (success) {
      dfd.resolve("Operation successful!"); // Resolve on success
    } else {
      dfd.reject("Operation failed!"); // Reject on failure
    }
  }, 1000); // Simulate 1-second delay

  return dfd.promise(); // Return the Promise part
}

// This code will run when the scene loads
// We'll attach handlers in the next scene
console.log("Deferred created. Waiting for resolution...");

Using .done() and .fail()

function doSomethingAsync() {
  const dfd = $.Deferred();
  setTimeout(function() {
    const success = true; // For this example, let's ensure success
    if (success) {
      dfd.resolve("Data loaded!");
    } else {
      dfd.reject("Network error!");
    }
  }, 500);
  return dfd.promise();
}

const myPromise = doSomethingAsync();

myPromise.done(function(message) {
  console.log("SUCCESS:", message);
});

myPromise.fail(function(errorMessage) {
  console.log("FAILED:", errorMessage);
});

myPromise.always(function() {
  console.log("Operation complete (done or failed).");
});

console.log("Initiating async operation...");

Transforming Results with .then()

function fetchData() {
  const dfd = $.Deferred();
  setTimeout(() => {
    console.log("Data fetched.");
    dfd.resolve({
      id: 1,
      name: "Widget"
    });
  }, 500);
  return dfd.promise();
}

fetchData()
  .then(function(data) {
    console.log("Processing fetched data:", data);
    return data.name.toUpperCase(); // Transform the data
  })
  .then(function(processedName) {
    console.log("Transformed name:", processedName);
    // This second .then() receives the result of the first .then()
  })
  .fail(function(error) {
    console.error("Error:", error);
  });

console.log("Starting data fetch and transformation...");

Caching & Deferreds Quiz

Summary: Faster, Smarter jQuery