addEventListener受け渡し

Question

addEventListenerで得た値を他の引数に渡したい。

すいませんまだ勉強したばかりなので”引数”や”hoge”の使い方が違っているかもしれません。

画面サイズが変わった時、横が１２００px以下の場合はtrue,1200より大きい場合はfalseをhogeに代入しレスポンシブデザインの変更をしようと思っていますがhogeの値を受け渡しできてないようです。

window.addEventListener("resize",function(){
 hoge = window.matchMedia("(max-width:1200px)").matches;
console.log(hoge);
//ここまではhogeの値が取得でき正常に動いています。
}); 
//ここからhogeの値が入っていません。
if(hoge){
処理......
}
else{
処理.....
}

if（）のところにtrue,falseを入れるにはどうすればいいのでしょうか？

##追加
MediaQueryListを使っても思い通りの結果にならなかったのでif文のコードも追加します。

if (e.matches){
		var timer = setInterval(function() {
		
			(indexSlider).fadeOut("slow").removeClass(BGsize[index]);
			index=(index+1)%4;
			
			(indexSlider).fadeIn("slow").delay(2000).addClass(BGsize[index]);			
			console.log("大きい"+af);
		}, 3000);	
		}

以下関連の全コード

var  af=window.matchMedia("(max-width:767px)");
	 
	function testes(e){
		if (e.matches){
		var timer = setInterval(function() {
		
			(indexSlider).fadeOut("slow").removeClass(BGsize[index]);
			index=(index+1)%4;
			
			(indexSlider).fadeIn("slow").addClass(BGsize[index]);			
		}, 3000);	
		}
	
	 else{var timer = setInterval(function() {
		
			(indexSlider).fadeOut("slow").removeClass(SMsize[index]);
			index=(index+1)%4;
			(indexSlider).fadeIn("slow").addClass(SMsize[index]);				
		}, 5000);
		}
		
	}
	af.addListener(testes);



///下記のコードで初期値で入れていました。コードを変えたことでこれも問題あるとわかるのですが解決ができていないためそのまま載せます。
if (!af.matches){
	 indexSlider.addClass(BGsize[0]);
	}
	 else if(af.matches){
	 indexSlider.addClass(SMsize[0]);
	}
///ここまで

MediaQueryListを使ってダメだった点：
１．767サイズより大きいサイズだった場合if(e.matches)=trueが反応しない。動的に小さくなった時にtrueの処理が始まる。
２．767サイズより小さい場合elseの処理が始まらない。動的に大きくなりまた小さくなると処理が始まるが,if trueとelseの両方の処理が繰り返される。

実現したいことウィンドウを開いたとき画面サイズを所得してif文(繰り返させるtimer）を起動させる。
サイズが変わった時、処理を終了(繰り返しのtimerを停止）させてif文を実行する。（現状だと両方実行してしまうため）

Answer 1

hogeの値を受け渡しできてないようです。

はい、このifがある箇所はイベントを登録した直後（resizeイベントが起きないうち）に実行されるので、hogeに値は入りません。

必要な処理は、resizeのイベントハンドラの中で行うのがいちばん書きやすいかと思います。

Comments

[退会済みユーザー]

早い回答ありがとうございます。
resize内に書いてしまうとイベントが何度も発生するため
どうしても外に書きたいのですが...

[maisumakun]

そのまま外に書くのであれば実行は最初の1度きりとなりますが、それでいいのならresizeイベント自体が不要かもしれません（直前でmatchMediaでの判断をすればいいので）。

[maisumakun]

「画面サイズが変わった時」に動かしたいのであれば、イベントの中に実行コードを入れるしかありませんが、resizeでなくてMediaQueryListを使う手もあります（こちらであれば、メディアクエリの変わった瞬間にしかイベントが起きません）。

https://developer.mozilla.org/ja/docs/Web/API/MediaQueryList

[退会済みユーザー]

MediaQueryListで試してみましたが解決ができませんでした。
質問ないようを修正しました。申し訳ないのですが教えていただけませんでしょうか？

[maisumakun]

すみません、「画面の変更に合わせてタイマーの動きを切り替えたい」のであれば、それを先に書いてほしかったです。

単発の処理とタイマーの処理では考え方が大きく違ってきます（まず気づいた点ですが、setIntervalしかなくてclearしていないので、タイマーが増え続けて思わぬ動きをするようになりそうです）。

[退会済みユーザー]

いろいろと勉強になりました。不足な質問内容でしたが解答していただいてありがとうございました。
おかげさまで何となか解決ができました。ありがとうございます。