jQuery Academy · Lesson

Efficient Event Handling and Throttling

Implement event throttling and debouncing for frequently triggered events like resizing or scrolling, preventing excessive function calls and improving responsiveness.

Event Overload: A Performance Issue

When building interactive web applications, we often rely on events like scrolling, resizing, or typing. These events trigger functions that update the UI or perform calculations.

However, if these events fire too frequently, they can lead to performance bottlenecks, a sluggish user experience, and even browser crashes. This is where optimization techniques become crucial.

The Problem: Rapid Event Firing

Let's see how often a typical event, like scroll, can fire without any optimization. Open the console or observe the counter as you scroll.

Notice how quickly the count increases, indicating many function calls in a short period. This can be very inefficient.

<!DOCTYPE html>
<html>
<head>
<title>Rapid Event Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  body { height: 200vh; font-family: sans-serif; margin: 0; }
  #status { position: fixed; top: 10px; left: 10px; background: #ffe0b2; padding: 8px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
  p { margin-top: 50px; padding: 10px; }
</style>
</head>
<body>
  <div id="status">Scroll Count: 0</div>
  <p>Scroll down to see the event fire rapidly.</p>
  <script>
    $(document).ready(function() {
      let count = 0;
      $(window).on('scroll', function() {
        count++;
        $('#status').text('Scroll Count: ' + count);
      });
    });
  </script>
</body>
</html>

All lessons in this course

← Back to jQuery Academy