【JavaScript】監視するイベントを作成する関数

2018年11月26日
JavaScript

scrollやresizeなどの頻発するイベントを任意の間隔で監視するために作成した。

コード

function createObservingEvent( interval, onStarted, onExecuting, onEnded ) {
    let intervalID  = null;
    let isExecuting = false;

    const onElapsed = function() {
        if ( !isExecuting ) {
            clearInterval( intervalID );
            intervalID = null;

            if ( onEnded !== null ) onEnded();
            return;
        }

        if ( onExecuting !== null ) onExecuting();
        isExecuting = false;
    };

    const onExecute = function() {
        isExecuting = true;

        if ( intervalID !== null ) return;

        if ( onStarted !== null ) onStarted();
        intervalID = setInterval( onElapsed, interval );
    };

    return onExecute;
};

使い方

引数に「監視する間隔」、「( イベントが )開始した時の処理」、「実行している時の処理」、「終了した時の処理」の4つを指定し、呼び出す。

そして、その戻り値をscrollやresizeなどのイベントを登録する際のaddEventListener関数の第2引数に指定する。

これで指定した間隔でイベントを監視し、各タイミングで引数に指定した処理が呼ばれる。

const ELEMENT           = document.getElementById( 'element' );
const observingEvent    = createObservingEvent( 
    100, 
	function() { /* イベントを開始した時の処理 */ }, 
	function() { /* イベントを実行している時の処理 */ },
	function() { /* イベントを終了した時の処理 */ }
);
        
ELEMENT.addEventListener( 'scroll', observingEvent );

関連ページ