はじめまして、たしぎと申します。
どうしてもわからない所があり質問させて頂きました。
よろしくお願い致します。

今回の質問はエラーの解決ではなく、if文の中に真偽値があるケースの
コードの動きについての質問になります。
コードはこちらの「スクロールによって見え隠れするヘッダー」を参考にした
素のJavaScriptでのスクロールヘッダーの実装になります。

質問内容

24行目、コメント②番のticking = falseが必要な理由がわかりません。

試したこと

まず6行目のコメント①番のfalseをtureに変えてみましたが、機能しません。
これはわかります。
次に24行目のコメント②のticking=falseを削除してみると、機能しません。
これがわかりません。
なぜこれが無いと機能しないのか、なぜこの位置で機能するのかがわかりません。
6行目コメント①のticking=falseだけで機能するような気がしてしまうのです。
このif文の条件式 ( !ticking ) はどのような参照をしているのかが知りたいです。
スコープやif文のドキュメントや記事などを、いくら調べても出てきませんでした。

html

<header id="header">ヘッダー</header>

JavaScript

(function () {
  const target = document.getElementById("header"),
    height = 56;
  let offset = 0,
    lastPosition = 0,
    ticking = false; // ①

  function onScroll() {
    if (lastPosition > height) {
      if (lastPosition > offset) {
        target.classList.add("head-animation");
      } else {
        target.classList.remove("head-animation");
      }
      offset = lastPosition;
    }
  }

  window.addEventListener("scroll", function (e) {
    lastPosition = window.scrollY;
    if (!ticking) {
      window.requestAnimationFrame(function () {
        onScroll(lastPosition);
        ticking = false; // ② これがわかりません
      });
      ticking = true; // ③
    }
  });
})();

以上の疑問についてお教え頂けますでしょうか。
もしくは参考になる記事等がありましたらお教えください。
よろしくお願い致します。