window.matchMedia は超便利な件

レスポンシブデザインのサイトを構築していく中で、「この横幅の時はこうで、それ以上はこう・・・」なんて場面があると思います。

それがJavaScriptを利用してスライダーを使用していた場合、
・767px以下の時はスライダーは解除する。
・それ以上の場合はスライダーが動く

なんてのを今までは

$(window).on('resize', function(){
    var myWindowWidth = $(window).width();
    if(myWindowWidth < 767){
       hoge();
    }else{
       hogehoge();
    }
});

なんてやってましたが、リサイズするたびイベントが行われるのでスライダーの挙動を制御しきれない場面がありました。
他にもTimerを利用したりとしていましたが綺麗では無い。

そこでこれ。「window.matchMedia」です。
とある点（ブレイクポイント）を通過したときのみ、イベントが発火します。
例えば定番ライブラリ「slick」を利用した場合、上記の動きを実現させるには

$(document).ready(function(){
  $([selector]).slick();   //とりあえず一回起動
  if(window.matchMedia("(max-width:767px)").matches){
      // 読み込みが完了したときに、767px以下の場合に行いたい処理
      $([selector]).slick('unslick');   //スライダー解除
  }else{
      // 読み込みが完了したときに、767px以上の場合に行いたい処理
  }
  function matchFunc(){
      if(window.matchMedia("(max-width:766px)").matches){
        // windowサイズを変更して、766px以下になったら行うイベント
        $([selector]).slick('unslick');   //スライダー解除
      }
      if(window.matchMedia("(min-width:767px)").matches){
        // windowサイズを変更して、767px以上になったら行うイベント
        $([selector]).slick();   //スライダー起動
      }
  }
  window.matchMedia("(max-width:767px)").addListener(matchFunc);
});

とこんな感じです。
スッキリとして見栄えもいいです。