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

リサイズイベントの頻度を減らす方法

リサイズイベントは発火する頻度が高く、処理内容によってはブラウザに負担がかかります。イベントの処理回数を間引くには、setTimeout()を利用しましょう。

サンプルコード

500msに1回の頻度で処理を行なうサンプルコードです。頻度を調節するには、500の数値を変更して下さい。

var timeoutId ;

window.addEventListener( "resize", function () {
	// setTimeout()がセットされていたら無視
	if ( timeoutId ) return ;

	timeoutId = setTimeout( function () {
		timeoutId = 0 ;

		// 処理内容
	}, 500 ) ;
} ) ;

デモ

リサイズ中にカウントアップするイベントを設定しました。count1には頻度を減らした場合の処理回数、count2は通常の頻度の処理回数が代入されます。

var timeoutId ;
var count1 = 0 ;
var count2 = 0 ;

window.addEventListener( "resize", function () {
	// 通常のリサイズイベント (比較用)
	++count2 ;

	// setTimeout()がセットされていたら無視
	if ( timeoutId ) return ;

	timeoutId = setTimeout( function () {
		timeoutId = 0 ;

		// 処理内容
		++count1 ;
	}, 500 ) ;
} ) ;

count1 = 0
count2 = 0

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