jsで、任意のタイミングで「1度だけ」処理を実行したい

Question

###スクロール時に、任意の要素が画面内に入ってきた時に「1度だけ」処理を実行したい

1. スクロールする
2. 任意の要素が画面内に入っているか確認する
3. 入っていれば処理を行い、以降は処理を行わない

※jquery の one() のようなイメージです。

javascript（jquery）にて、上記のようなことを実現したいのですが、
下記のコードでは、スクロールするたびに処理が発生してしまいます。

###該当のソースコード

  $(window).scroll(function(){
    var scrollTop = $(window).scrollTop();

    $('.hoge').each(function() {
      var top = $(this).offset().top;
      if(scrollTop > top){
        console.log('once!'); // 一度だけ実行させたい処理
      }
    });

  });

###試したこと
そこで実行済みであることを保存する変数を試してみましたが、うまく動かず。。。
やり方もスマートでない気がします。

  $(window).scroll(function(){
    var scrollTop = $(window).scrollTop();

    $('.hoge').each(function() {
      var top = $(this).offset().top;
      var used = false;
      if(scrollTop > top && used === false){
        console.log('once!');
        used = true;
      }
    });

  });

Answer 1

変数usedを外側のスコープに置いてやればいいんじゃないでしょうか。

コードをシンプルにするために、空配列を宣言し、配列の範囲外にアクセスした時、undefined(falsy)を返すという性質を利用します。

$(window).on("scroll", function(eve){
     var usedList = this;
     var scrollTop = $(eve.currentTarget).scrollTop();

     $('.hoge')
         .filter(function(i, e){
             var top = $(e).offset().top;
             return (scrollTop > top);
         })
         .filter(function(i, e){
             if(usedList[i]) return false;
             return (usedList[i] = true);
         })
         .each(function(i, e){
             // 以下に一度だけ実行させたい処理を書く
         });
}.bind([])); // thisを空配列に束縛する(IE8以前への対応が必要など、気に入らなければ素直にクロージャ作ってください)

Comments

[uroboros]

ありがとうございます！

実装してみたのですが、動かず。。。
通常のスクロールでは何も起こらず、
スクロールした状態でページリロードすると、スクロールで過ぎた .hoge 要素の数だけ、処理が実行されるという挙動です。。。

空要素とfilterの使い方、目からウロコで勉強になりました。

[gaogao_9]

これは…失礼しました。

既にベストアンサーは決まっていますが、後から読む人のために一応コードの方を修正しておきました。

[uroboros]

ありがとうございます！
こちらも動作しました。

Answer 2

現在書かれているやり方では used が常に false になります。「実行済みであることを保存する」のであればこういうやり方でどうでしょう。

$( window ).scroll( function() {
	var scrollTop = $( window ).scrollTop();
	$( '.hoge' ).each( function() {
		var top = $( this ).offset().top;
		var used = $( this ).prop( 'used' );
		if ( scrollTop > top && used === false ) {
			console.log( 'once!' );
			$( this ).prop( 'used', true );
		}
	} );
} ); // 未テスト

---

追記：

こっちのほうが良いかも。

$( window ).scroll( function() {
    var scrollTop = $( window ).scrollTop();
    $( '.hoge:not(.fire)' ).each( function() {
        var top = $( this ).offset().top;
        if ( scrollTop > top ) {
            console.log( 'once!' );
            $( this ).addClass( 'fire' );
        }
    } );
} ); // 未テスト

Comments

[uroboros]

ありがとうございます！

こちら期待した動きができました！
クラスで管理、思いつきませんでした。