title: Only fire a function once on scroll (scrollstop)
body: <p>So, I'd like to fire a function only once on scroll (using <a href="https://stackoverflow.com/questions/16867266/peform-a-function-if-an-element-is-completely-in-the-viewport-live/16867544?noredirect=1#16867544">Scrollstop</a>, given by a stackoverflow answer)</p>
  
  <p>The problem is that I don't get to fire the function only once. I've tried different solutions ( .on(), setting a counter, setting it outside/inside the window.scrollstop function) but nothing worked.</p>
  
  <p>I don't think it's difficult, but.. I didn't get to make it work so far.</p>
  
  <p>Here's the plugin I'm using</p>
  
  <pre><code>  $.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));
            });
        };
  </code></pre>
  
  <p>and here's my code:</p>
  
  <pre><code>        $(window).scrollStopped(function(){
              if ($(".drawing1").withinViewport()) {      
                  doNothing()
                  }
              })
  
  
  var doNothing = function() {
              $('#drawing1').lazylinepainter('paint');
          }
  </code></pre>
  
  <p>(removed the counter since it didn't work)</p>
  
  <p><a href="http://aurelieremia.be/tfa/about.html" rel="nofollow noreferrer">Live demo here</a></p>
  
  <p>PS: the function I'd like to make happen only once is the lazyPaint. It begins when we scroll to the element but it fires once again when it ends.</p>