each function内でスクロールイベントを一回だけ発火したい。

Question

それぞれ .hoge がついている要素に対して 一度だけスクロールイベントを
発火したいのですが、うまくいきません。(スクロールのたびに何度も発火します。)

each function内ではどのようにすれば うまくいきますでしょうか。
アドバイスをいただけますと助かります。

$(function(){
   $(window).scroll(function() {
      $('.hoge').each(function () {
         var elemPos = $(this).offset().top;
         var scroll = $(window).scrollTop();
         var windowHeight = $(window).height();

         if (scroll > elemPos - windowHeight ) {
            var flag = false;

            if(!flag){
               console.log('done');
               flag = true;
            }
         }
      });
   });
 });

Comments

[m.ts10806]

「うまくいかない」と仰いますが「一度だけ」をやろうとしている部分はどこでしょうか。

[neg404]

console.log('done'); の部分です。

[m.ts10806]

HTML提示されないと何とも言えませんね。要件後出しはよろしくありません。

Answer 1

変数のスコープの問題もあるのでは。
$('.hoge').each(function () {の中でvar flagが宣言されているのでイベントのたびに新しく変数が宣言されます。
グローバルで宣言したほうが良いのでは。

他の'.hoge'に対して発火されなくなりました。

フラグも配列にするかなにかして「何番目の.hoge」を持っておくとか。

Comments

[neg404]

変数ではなく、$(this).addClass('visible');を追加して、そのクラスを持っているかを判定して発火するように出来ました。
アドバイスありがとうございました。

[m.ts10806]

全く方向性の違う解決方法なので自身で回答を書いて自己解決にされた方が良いのでは。

Answer 2

例示のソースだけでは動作確認できないのであてずっぽうですが
フラグを「$(window).scroll(」の外側にだして、グローバルに参照しては？

Comments

[neg404]

eachの外側になるので、最初の'.hoge'のみ一度 発火された後 他の'.hoge'に対して発火されなくなりました。