どもです。
ものっそい今更感あるのですが、初めて遭遇した事柄をば。
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回動いている？」
なんて考えてしまって変な時間を取られないように…
はい、個人的な今日の教訓です。(´・ω・｀)