HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>notifyWith() — async</title>
</head>
<body>
  <h1>Background sync</h1>
  <pre id="out">Starting...</pre>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    (function () {
      var lines = [];
      var out = document.getElementById("out");
      var task = {
        title: "Background sync",
        onProgress: function (value) {
          lines.push(this.title + " → " + value + "%");
          out.textContent = lines.join("\n");
        }
      };
      var dfd = $.Deferred();
      var steps = [20, 40, 60, 80, 100];

      dfd.progress(function (value) {
        this.onProgress(value);
      });

      dfd.done(function (msg) {
        lines.push("Done: " + msg);
        out.textContent = lines.join("\n");
      });

      steps.forEach(function (pct, index) {
        setTimeout(function () {
          dfd.notifyWith(task, [pct]);
          if (pct === 100) {
            dfd.resolveWith(task, ["Sync complete"]);
          }
        }, 350 * (index + 1));
      });
    })();
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery deferred.notifyWith() — timed async steps (Try It)