レスポンシブデザイン　javascriptでウィンドウのリサイズを検知する【javascript/jQuery】

レスポンシブページを作成するとき、javascriptで動的に切り替えるときによく使うコードなのでメモ。最近はCSSでもいろいろできるみたいですが。

$(function() {
  let timer = false;
  let initWidth = parseInt($(window).width());
  const BREAK_POINT = 767;

  function deviceCheck() {
    initWidth = parseInt($(window).width());

    if(initWidth <= BREAK_POINT) {
        console.log('device_sp');
    } else {
      console.log('device_pc');
    }
  }

  function changeResize() {
    if(timer !== false) {
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      if(initWidth !== $(window).width()) {
    deviceCheck();
    }
      }, 200);
  }
  window.addEventListener('resize', changeResize);
  deviceCheck();
});