title: Vue.js debounce scroll
body: <p>I am trying to use the <a href="https://www.npmjs.com/package/debounce" rel="nofollow noreferrer">debounce</a> package with a Vue.js <code>v-on:scroll</code> binding like so:   </p>
  
  <pre><code>&lt;div @scroll="debounce(onScrollMessages, 200)"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The problem is that <code>debounce</code> actually returns the debounced function to be used, but binding the event this way will actually call <code>debounce(onScrollMessages, 200)</code> every scroll event, this means that the debounced function will be computed and <strong>created every</strong> scroll event.</p>
  
  <p>The actual issue is that the <code>@scroll</code> will bind the event something like this:</p>
  
  <pre><code>onScroll: function () {
     debounce(onScrollMessages, 200);
  }
  </code></pre>
  
  <p>But, in order for the debounced function to be computed only once it should bind the event something like this:</p>
  
  <pre><code>// Notice how now the scroll event calls directly the 
  // debounced function returned by "debounce()", not the
  // function that calls "debounce()"
  onScroll: debounce(onScrollMessages, 200)
  </code></pre>
  
  <p>How can I bind the <code>@scroll</code> event to the function returned by <code>debounce()</code> and not to a function that calls <code>debounce()</code> every time?</p>