画面サイズに応じて機能を起動し、サイズ変更後に他の機能を停止する方法は？

Question

ロード、サイズ変更、スクロール後に画面サイズに応じて異なる機能を起動しようとしています。他の関数での計算の影響を防ぐには、それらを止める必要があります。ここでJsfiddle からダミーの機能を持つ例がJsfiddleから実関数との例が

あなたがそれを見ることができますコンソールを見れば（それは、HTMLやCSS、ご理解のためだけの機能を示していない）であればここで

最初のreziseの最初の関数が実行された後、別のウィンドウサイズのブレークポイントを取得すると、別の関数が最初の関数と共に実行されます。 3番目のブレークポイントを取得した場合は3番目の関数と同じです。

function sticker1220() { 
    $(window).on("load resize scroll",function(){ 
    console.log('sticker1220'); 
    }); 
}; 

function sticker950() { 
    $(window).on("load resize scroll",function(){ 
    console.log('sticker950'); 
    }); 
}; 

function sticker320() { 
    $(window).on("load resize scroll",function(){ 
    console.log('sticker320'); 
    }); 
}; 

function checksize() { 

    if ($(window).width() > 1220) { 
    sticker1220(); 
    } else if ($(window).width() > 640 & $(window).width() < 1219) { 
    sticker950(); 
    } else if ($(window).width() < 639) { 
    sticker320(); 
    } 
}; 

checksize(); 
$(window).resize(function() { 
checksize(); 
$('p').text($(window).width()); 
}); 

Answer 1

あなたはこのような何かを行うことができます：私は私のjqueryのあるウィンドウがここに別のブレークポイント

にサイズを変更した後に機能を停止したいです。

私はメディアクエリーをオブジェクトに抽象化しました。そのオブジェクトは、利用可能なコールバックがあればそれを見つけるために反復することができます。

また、あなたのUIスレッドをロックする可能性のある個別のサイズ変更イベントを実行する必要がないので、管理が簡単なresizeコールバックにのみ存在します。以前は画面のサイズが変更されるたびに新しいサイズ変更イベントがバインドされていましたが、画面解像度を変更するとイベントが正常に機能します。

もっと速くする必要がある場合は、setTimeoutを使用してresizeイベントを再帰的タイマーに変更できます。

function checksize(mediaQueries) { 
 
    return function(e) { 
 
    const width = window.innerWidth 
 
    $('p').text(width) 
 
    const query = mediaQueries.find(x => { 
 
     switch (true) { 
 
     case !!x.min && !!x.max: 
 
      return width >= x.min && width < x.max 
 
     case !!x.min: 
 
      return width >= x.min 
 
     case !!x.max: 
 
      return width <= x.max 
 
     default: 
 
      return false 
 
     } 
 
    }) 
 
    if (typeof query.cb === 'function') { 
 
     return query.cb(e) 
 
    } 
 
    } 
 
} 
 

 
var atMedia = [ 
 
    { 
 
    max: 639, 
 
    cb: function(e) { 
 
     console.log('sticker320') 
 
    } 
 
    }, 
 
    { 
 
    min: 640, 
 
    max: 1219, 
 
    cb: function(e) { 
 
     console.log('sticker950') 
 
    } 
 
    }, 
 
    { 
 
    min: 1220, 
 
    cb: function(e) { 
 
     console.log('sticker1220') 
 
    } 
 
    } 
 
] 
 

 
$(window).resize(checksize(atMedia)).trigger('resize')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p></p>