HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>debounced .resize()</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 480px; }
    #box { background: #dbeafe; border: 2px solid #2563eb; border-radius: 8px; padding: 16px; text-align: center; font-weight: 600; color: #1e40af; }
    #stats { margin-top: 12px; font-size: 14px; color: #475569; }
  </style>
</head>
<body>
  <div id="box">Debounced layout via legacy .resize()</div>
  <div id="stats">Raw: <span id="raw">0</span> · Debounced: <strong id="deb">0</strong></div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    var raw = 0, deb = 0, timer;
    $(window).resize(function() {
      raw++;
      $("#raw").text(raw);
      clearTimeout(timer);
      timer = setTimeout(function() {
        deb++;
        $("#deb").text(deb);
        $("#box").text("Width: " + $(window).width() + "px — layout #" + deb);
      }, 200);
    });
    $("#box").text("Width: " + $(window).width() + "px — layout #0");
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .resize() — debounced legacy handler (Try It)