zadziałać tylko raz na funkcję przewijania (scrollstop)

Question

Więc chciałbym odpalić funkcję tylko raz na zwoju (używając Scrollstop, wydane przez odpowiedź stackoverflow)

Problem polega na tym, że ja nie rozumiem uruchomić funkcję tylko raz. Próbowałem różnych rozwiązań (.on(), ustawienie licznika, ustawienie go na zewnątrz/wewnątrz funkcji window.scrollstop), ale nic nie działało.

Nie sądzę, że to trudne, ale ... Nie udało mi się sprawić, by działało tak daleko.

Oto plugin Używam

$.fn.scrollStopped = function(callback) {   
      $(this).scroll(function(){ 
       var self = this, $this = $(self); 
       if ($this.data('scrollTimeout')) { 
       clearTimeout($this.data('scrollTimeout')); 
       } 
       $this.data('scrollTimeout', setTimeout(callback,300,self)); 
      }); 
     }; 

i tu jest mój kod:

 $(window).scrollStopped(function(){ 
      if ($(".drawing1").withinViewport()) {  
       doNothing() 
       } 
      }) 


var doNothing = function() { 
      $('#drawing1').lazylinepainter('paint'); 
     } 

(usunięto licznik ponieważ nie działa)

Live demo here

PS: funkcja, którą chciałbym zrealizować tylko raz, to LeniPaint. Zaczyna się, gdy przewijamy do elementu, ale po jego zakończeniu strzela ponownie.

Answer 1

jak o użyciu zmiennej, aby zobaczyć, czy to było wcześniej zwolniony:

var fired = 0; 
$.fn.scrollStopped = function(callback) {   
      $(this).scroll(function(){ 
       if(fired == 0){ 
       var self = this, $this = $(self); 
       if ($this.data('scrollTimeout')) { 
        clearTimeout($this.data('scrollTimeout')); 
       } 
       $this.data('scrollTimeout', setTimeout(callback,300,self)); 
       fired = 1; 
       } 
      }); 
     }; 

Answer 2

Oto moja wersja o ogień funkcyjny raz podczas słuchania przypadku przewijania:

var fired = false; 
window.addEventListener("scroll", function(){ 
    if (document.body.scrollTop >= 1000 && fired === false) { 
    alert('This will happen only once'); 
    fired = true; 
    } 
}, true) 

Answer 3

Jak ten temat rozwiązanie?

function scrollEvent() { 
    var hT = $('#scroll-to').offset().top, 
    hH = $('#scroll-to').outerHeight(), 
    wH = $(window).height(), 
    wS = $(this).scrollTop(); 
    if (wS > (hT+hH-wH)){ 
    console.log('H1 on the view!'); 
    window.removeEventListener("scroll", scrollEvent); 
    } 
} 
window.addEventListener("scroll", scrollEvent);