Window.matchmediaリスナが2回発砲する

Question

私はいくつかの値をJSの設定オブジェクト内の特定のブラウザブレークポイントで変更するいくつかのjavascriptを書こうとしています。

私はconfigオブジェクト内window.matchmediaテストを保存しているし、私はそうのような各テストにイベントリスナーを追加するには、このオブジェクトのキーをループしています：

Object.keys(config.mediaQueries).map((key) =>{ 
    config.mediaQueries[key].addListener(function(){ 
     console.log("breakpoint change"); 
    }); 
}); 

https://codepen.io/decodedcreative/pen/YQpNVO

しかし、ブラウザーのサイズが変更され、これらのリスナーコールバック関数が実行されると、それらは2回実行されるように見えます。コンソールを開いた状態で上記のCodePenをチェックすると、私の意図がわかります。

私がここで間違っていることを誰もが知っていますか？

Answer 1

が

Object.keys(config.mediaQueries).map((key) =>{ 
    console.log("register key: '" + key + "'"); 
    config.mediaQueries[key].addListener(function(){ 
     console.log("breakpoint change key:'" + key + "'"); 
    }); 
}); 

結果のログ出力は、常に2つのラインを生成しますあなたの直接の質問に答えるために、あなたは間違ったことをしていません。そしてJSはそれがするべきことを正確にやっている。

trldイベントは2回発生しますが、一致するメディアクエリが1つだけ含まれています。

ブラウザがブレークポイントに達すると、2つのイベントがログに記録されます。たとえば、ブラウザのサイズを1250ピクセルから1150ピクセルに変更する場合を考えてみましょう。ウィンドウの幅が1199ピクセルになると、関数：

Object.keys(config.mediaQueries).map((key) =>{ 
    config.mediaQueries[key].addListener(function(event){ 
    console.log("breakpoint change"); 
    }); 
}); 

は2イベントを記録します。これ以上深く掘り下げてイベントを記録する場合は、

Object.keys(config.mediaQueries).map((key) =>{ 
    config.mediaQueries[key].addListener(function(event){ 
    console.log(event); 
    }); 
}); 

などのメディアクエリに関する情報が表示されます。私はイベントオブジェクトを下の重要な小道具に煮詰めました。

ここでは、2つのイベントが記録されていますが、イベントの1つに一致するクエリが含まれています。

Object.keys(config.mediaQueries).map((key) =>{ 
    config.mediaQueries[key].addListener(function(event){ 
    if (event.matches) { 
     console.log(event); 
    } 
    }); 
}); 

のみマッチングメディアクエリがログに記録されます。この小さな変更に伴い：私たちは、ロギング用のスクリプトを改善したい場合

だから、あなたはmatchesプロパティをチェックすることができます。

Answer 2

イベントのように見えるのは、サイズ変更直前とサイズ変更直後です。 "ブレークポイント"が変更された直後に変更を記録する場合は、ifステートメントを追加します。

編集：Noah Freitasが、リサイズ時に2つのキーのイベント発生に関して正しいかもしれません。あなたはconsole.log("breakpoint change");console.log(key, "breakpoint change");に変更すると、それは

function(e) { 
     if(e.matches) { 
     console.log("breakpoint change"); 
     } 
    } 

Answer 3

正常に動作する必要がありますので、それがキーに一致する場合は、まだ本当のリターンをe.matches xsとsクエリがトリガされているの両方を手動でサイズを変更するとき、あなたはそれを参照してくださいよブラウザウィンドウ。

タイムウィンドウ内でコールバックを1回だけ実行する場合は、イベントを抑制したり、何らかの方法で動作を達成する必要があります。

編集：Tomasz BubałaとBrett DeWoodyの回答は、両方ともevent.matchesのプロパティを正しく示しており、さらにこの問題の具体的な解決方法は.matchMediaです。

Answer 4

これが完全な回答であるかどうかわかりません。しかし、あなたは正しいです。コールバックは2つの異なるキーに対して2回発生します。

私はあなたの例を変更し、それを出力 key：

breakpoint change key:'m' 
breakpoint change key:'l' 

または減少幅について：

breakpoint change key:'s' 
breakpoint change key:'m'