SYNCERのロゴ
アイキャッチ画像

リサイズ終了時に処理を実行する方法

JavaScriptで、リサイズを終了したタイミングで処理を実行したい時は、resizeイベントとsetTimeout()を利用しましょう。

サンプルコード

リサイズを停止して500ms経った時に終了判定として処理を実行する例です。用途により、500の部分を調整しましょう。

var timeoutId ;

window.addEventListener( "resize", function () {
	// リサイズを停止して500ms後に終了とする
	clearTimeout( timeoutId ) ;

	timeoutId = setTimeout( function () {
		// 処理内容
	}, 500 ) ;
} ) ;

デモ

リサイズを停止した時に、カウントが増加するのを確認して下さい。

var timeoutId ;
var count = 0 ;

window.addEventListener( "resize", function () {
	clearTimeout( timeoutId ) ;

	timeoutId = setTimeout( function () {
		++count ;
	}, 500 ) ;
} ) ;

count = 0

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月14日 (木)
コンテンツを公開しました。