【JavaScript】スクロールしている時のイベントを間引く方法

2018年8月20日
JavaScript

JavaScriptのスクロールしている時のイベント( scroll )は、高頻度で発生するためそのまま使用すると処理負荷がかかる。そのため、setTimeout関数を利用し、イベントを間引く方法がある。

コード

let 	id 			= null;
const 	INTERVAL	= 300;

const onExecute	= function() {
	// 処理
	
	id = null;
};

const onScroll = function() {
	if ( id !== null ) return;
	
	id = setTimeout( onExecute, INVERTEL );
};

window.addEventListener( 'scroll', onScroll );

説明

スクロール中にスクロールしている時のイベント( scroll )が起こるたび、setTimeout関数を使用して実行したい処理( onExecute )を予約する。この時、idがnull以外( 予約済み )ならば何もしない。

そして、setTimeout関数で予約した処理が呼び出された場合、処理の最後でidをnull( 未予約 )にする。これでsetTimeout関数に指定した間隔で実行したい処理が呼ばれるため、scrollイベントを間引けたことになる。