HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ajaxTransport abort</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 560px; }
    button { margin-right: 8px; padding: 8px 14px; cursor: pointer; border: none; border-radius: 6px; color: #fff; }
    #start-slow { background: #2563eb; }
    #cancel-slow { background: #dc2626; }
    .log { margin-top: 14px; padding: 12px; background: #fef2f2; border-radius: 6px; font-size: 14px; }
  </style>
</head>
<body>
  <button type="button" id="start-slow">Start slow request</button>
  <button type="button" id="cancel-slow">Cancel</button>
  <div class="log" id="status">Start then cancel within 3 seconds.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $.ajaxTransport("slowmock", function(options) {
      if (options.url.indexOf("slowmock://") === 0) {
        var timerId;
        return {
          send: function(headers, completeCallback) {
            timerId = setTimeout(function() {
              timerId = null;
              completeCallback(200, "success", { text: "Slow response arrived" });
            }, 3000);
          },
          abort: function() {
            if (timerId) { clearTimeout(timerId); timerId = null; }
          }
        };
      }
    });

    var pending;
    $("#start-slow").on("click", function() {
      pending = $.ajax({ url: "slowmock://wait", dataType: "slowmock" })
        .done(function(text) { $("#status").text(text); })
        .fail(function(_jqXHR, textStatus) { $("#status").text("Request " + textStatus); });
    });
    $("#cancel-slow").on("click", function() {
      if (pending) { pending.abort(); pending = null; }
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery.ajaxTransport() — abort delayed mock (Try It)