HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.queue custom name</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 420px; }
    #box {
      padding: 20px; background: #ecfdf5; border: 1px solid #a7f3d0;
      border-radius: 8px; min-height: 28px;
    }
    button { margin-top: 12px; padding: 8px 14px; }
  </style>
</head>
<body>
  <div id="box">Idle</div>
  <button type="button" id="go">Run tasks queue</button>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $( "#go" ).on( "click", function () {
      var el = document.getElementById( "box" );
      $( el ).text( "Idle" );
      jQuery.queue( el, "tasks", [] );

      jQuery.queue( el, "tasks", function ( next ) {
        $( el ).text( "Step 1" );
        setTimeout( next, 500 );
      });
      jQuery.queue( el, "tasks", function () {
        $( el ).text( "Step 2" );
        jQuery.dequeue( el, "tasks" );
      });

      jQuery.dequeue( el, "tasks" );
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery.queue() — custom tasks queue (Try It)