クラスが可視要素に追加されている場合は、一度起動関数

Question

スクロール中に要素にクラスが追加されているかどうかを確認し、次の要素にが追加されるまでを1回だけ起動します。

ここに私の第一の機能：

function onScreen() { 

    $('article').each(function() { 

     var thisTop = $(this).offset().top - $(window).scrollTop(); 
     var middleScreen = $(window).height()/2; 

     if (thisTop < middleScreen && (thisTop + $(this).height()) > middleScreen) { 
      $(this).addClass('visible'); 
     } else { 
      $(this).removeClass('visible'); 
     } 
    }); 
} 

// launch 
$(window).on('load scroll', onScreen); 

マイseconde機能：私は一度だけvisibleクラスが別のarticleに追加された場合に起動したいと思います。

function textChange() { 

    var v = $('article.visible'); 
    var el = $('.el', v); 
    var text = $(el).html(); 
    $('.titre').html(text); 

} 

$(window).on('load scroll', textChange); 

注：2つの別々の機能を維持することが重要です。 私の問題はスクロール機能です。textChange()各ピクセルをページ上でスクロールします。奇妙なことに、onScreen()関数は、次のarticleが表示されるまで、visibleクラスを1回追加します。

ありがとうございました。

Answer 1

機能が実行されたかどうかを示しますグローバル変数を導入：関数が初めて呼び出されたとき

var textChanged = false; 

あなたtextChangeで（）関数がtrueに設定します。

function textChange() { 
    if(!textChanged){ 
     textChanged = true; 
     var v = $('article.visible'); 
     var el = $('.el', v); 
     var text = $(el).html(); 
     $('.titre').html(text); 
    } 
} 

EDIT：なぜあなたはしないでください

if (thisTop < middleScreen && (thisTop + $(this).height()) > middleScreen) { 
    $(this).addClass('visible'); 
    if(!textChanged){ 
     textChange(); 
    } 
} else { 
    $(this).removeClass('visible'); 
}