イベントキャンセル後再実行

カテゴリーフィルタ機能と３点リーダーを実装しようとしてる最中に詰まってしまったので質問いたしました。

▼フィルタ機能の参考サイトは下記です。
https://linkage-design.net/jquery-filtering-group

３点リーダーとフィルタ機能は、問題なく動いているのですが、
フィルターを掛ける要素の１つ目を目立たせるため１つ目の要素が横幅100％でそれ以下の要素が3つ並びになっております。
現状、フィルタをかけると、フィルタ前の３点リーダーの位置が残っており、１つ目以降の要素が１つ目に来ると３点リーダーの位置がおかしくなってしまいます。

そのため、loadイベントで発火したleaders()を$(window).off("load");でキャンセルし、ボタンを押した際に再発火するようにしたのですがうまくいきません。

html
1
2          <ul class="cat-list">
3              <li><button data-archive="all">全ての記事</button></li>
4              <li><button data-archive="soat01">soat01</button></li>
5              <li><button data-archive="soat02">soat02</button></li>
6          </ul>
7
8        <div class="p-topic-list inner" id="list">
9
10            <article data-category="soat01">
11              <div class="new-icon p-topic-imgBox">
12                <img alt="" src="/-/media//img/csr_03.png">
13              </div>
14                    <p class="textOverflow">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
15            </article>
16
17            <article data-category="soat02">
18              <div class="new-icon p-topic-imgBox">
19                <img alt="" src="/-/media//img/csr_03.png">
20              </div>
21                    <p class="textOverflow">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
22            </article>
23
24            <article data-category="soat02">
25              <div class="new-icon p-topic-imgBox">
26                <img alt="" src="/-/media//img/csr_03.png">
27              </div>
28                    <p class="textOverflow">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
29            </article>
30　　　　　</div>

css
1
2//1つ目のブロック**************************************
3article:first-child{
4 max-height: 8.8rem;
5 overflow: hidden;
6}
7
8//2つ目のブロック**************************************
9article:nth-of-type(n+2){
10 max-height: 4.8rem;
11 overflow: hidden;
12}

javascript
1
2//３点リーダー(jquery)********************************************
3  function leaders() {
4    $('.textOverflow').each(function () {
5      const $target01 = $(this)
6      let html = $target01.html()
7      let $clone = $target01.clone();
8      let $targetMaxH  = $target01.css("max-height");
9      let $targetMaxS  = $targetMaxH.slice( 0, -2 );
10      let $targetMaxhMath = parseFloat($targetMaxS);
11      if($target01.height()+2 >= $targetMaxhMath){
12        $clone.insertAfter(this);
13        $clone
14          .css({
15            display: 'none',
16            position: 'absolute',
17            overflow: 'visible',
18            maxHeight: 'none'
19          })
20          .width($target01.width())
21          .height("auto")
22          while (html.length > 0 && $clone.height() > $target01.height()) {
23            html = html.substr(0, html.length - 1)
24            $clone.html(html + '<span>...</span>')
25          }
26        $target01.html($clone.html())
27        $clone.remove()
28      }
29
30    })
31  }
32
33
34$(window).on('load', function(e) {
35    leaders()
36});
37
38  const animetionNone = document.querySelectorAll(".cat-list button")
39  console.log(animetionNone)
40  animetionNone.forEach(element => {
41    element.addEventListener("click",(event) => {
42        $(window).off("load");
43      setTimeout(() => {
44        leaders()
45      }, 500)
46
47    })
48  });
49
50