bfcacheには気を付けよう

ある日の弊社

営業さん「ブラウザバックした時クリックが反応しなくなっちゃったってお客さんから連絡来てるんですけど」
　　ぼく「！？」

何が起こったか

そもそも上記問題が起こる直前に、クリック連打した時連続で遷移のメソッドが起動してしまってただでさえクソ重いDBに負荷をかけられる、というクソみたいなコードを書いてやがったので、loadイベントで初期化したフラグのオンオフを見て、オンだったら起動しない、みたいな処理を書きました。こんなの

$(window).on('load', function(){
  hogeObject.flag = false;
});
$(".hogeButton").on('click', function(){
  if(!hogeObject.flag){
    hogeObject.flag = true;
    pageShow(this);
  }
});

が、ブラウザバックした時にloadイベントで初期化すべきフラグが初期化されず、hogeButtonクラスのボタンをクリックしても遷移が発生しない、という状況になってました。loadイベントでconsole.logで何か吐く様にしても、確かにブラウザバックでloadイベントが再度呼ばれてない。はて？と思って色々調べたところ、どうもbfcacheというものが影響しているということが発覚しました。（参考： https://yosiopp.net/archives/845/ ）

そこで、bfcacheで描画されても大丈夫な様に、フラグをpageshowイベントで初期化する様にして解決しました。（参考： https://developer.mozilla.org/ja/docs/Web/API/Window/pageshow_event ）

めでたし。