jQueryでスクロールイベントが複数あるときは「別の関数を書く」か「一つの関数にまとめる」か？

Question

###疑問
jQeuryで要素Aが見えたら処理aを実行し、要素Bが見えたら処理bを実行する、というのはよくあると思いますが、

そういったケースでは以下どちらにしますか？

↓「一つの関数にまとめる」

$(window).scroll(function(){
// 処理a
// 処理b
});

↓「別の関数を書く」

$(window).scroll(function(){
// 処理a
});

$(window).scroll(function(){
// 処理b
});

###疑問の経緯
現状は処理aのみでしたので前者で、「要素が見えたら」というその要素の宣言にconst targetElment = $('#targetA');としていました。

ですが今回新たに処理bが必要となりもう一度同じスコープ内でtargetElment とするわけにもいきませんし、targetElmentAとtargetElmentBにわけてもいいのですが、

ならいっそのこと「別の関数を書く」という方法でもよさそうに思いまして、

どちらがいいのかと疑問に思ったために皆様のご意見聞かせて頂きたく存じます。
宜しくお願い致します。

Answer 1

scrollイベントに対する回答では無くなってしまいますが、
要素Aが見えたら処理aを実行する場合は、Intersection Observer APIを使うことをお勧めします。まさに上記の条件の目的で使用することができますし、処理負荷もscrollイベントを使うよりも少ないです。

Intersection Observer が良さそうなので試してみた

JSでのスクロール連動エフェクトには Intersection Observerが便利

scrollイベントしか使うことができない場合は、ケースによるかと思いますが、負荷に影響がないならば、別の関数を書くのが後で保守しやすいのかなと思います。

Comments

[sofa]

これは知りませんでした。ご回答いただきありがとうございます。

[sofa]

こんにちは。あれからいろいろ試しているのですが、次のようなご経験はcobm様はございませんでしたか？
https://teratail.com/questions/257798
もし解決策をご存じでしたらと思い、ぶしつけながらこのコメント欄にて失礼させていただきました。