Start-Funktion sofort, wenn Klasse auf sichtbares Element hinzugefügt wird

Question

Ich mag wäre prüfen, ob eine Klasse auf ein Element in der Scroll hinzugefügt wird, und starten Sie eine andere Funktion, nur einmal, bis die Klasse auf das nächste Element hinzugefügt wird.

hier meine erste Funktion:

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); 

Meine seconde Funktion: Ich möchte nur einmal starten, wenn die visible Klasse in einer anderen article hinzugefügt wird.

function textChange() { 

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

} 

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

Hinweis: Es ist mir wichtig, zwei separate Funktion zu halten. Mein Problem ist die Scroll-Funktion Anruf textChange() jedes Pixel Ich scrolle auf der Seite. Strangly, die onScreen() Funktion fügen Sie die visible Klasse nur einmal, bis die nächste article wird sichtbar sein.

Vielen Dank für Ihre Vorschläge.

Answer 1

Einführung einer globalen Variablen, die Ihnen sagt, wenn die Funktion oder nicht ausgeführt wurde:

var textChanged = false; 

In Ihrem Textchange() Funktion auf true gesetzt, wenn die Funktion zum ersten Mal aufgerufen wurde:

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

EDIT: Alternativ können Sie die Prüfung tun, bevor die Funktion aufgerufen wird:

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