ど素人から毛を生やす。<延>

jQueryでセレクタを複数指定するとコールバック関数も複数起動する

Web > javascript 2016年3月4日(最終更新:1年前)

このページは2016.3.4に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。

ものっそい今更感あるのですが、初めて遭遇した事柄をば。

 

jQueryのメソッドに.animate()がありますが、これにはコールバック関数なるものを設定することができます。
.animate()の処理を終えたら稼働する関数なので、複数のアニメーションを繋げるときなんかによく使います。

で、このコールバック関数について、セレクタが複数ある場合、コールバック関数も2回起動する
考えてみれば当たり前なのですが、組んでいるときは見落としやすいので記録しておくことにしたのが今回の記事です。

セレクタが複数生じるアニメーションとして、代表的なものがスムーススクロールだと思います。

$("html, body").animate({scrollTop:position}, speed, "swing");

ブラウザによってhtmlで動いたりbodyで動いたりするので、どっちも設定しておくのが無難。

$("html, body").animate({scrollTop:position}, speed, "swing" ,function(){console.log('callback')});

こうやって書くと、コンソールログが2回書かれることになります。
スムーススクロールでコンソールログを書くことなんてそうないと思うのですが、

不具合の調査やプログラムの確認なんかをしているときに、
うっかり「ログが2回出たということは、この.animate()が2回動いている?」
なんて考えてしまって変な時間を取られないように…

はい、個人的な今日の教訓です。(´・ω・`)

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)