title: Calling a function at a changing rate according to a ease function?
body: <p>I'd like to have the ability to run functions at a certain rate, which can increase or decrease according to a mathematical function such as a curve... much the same way easing functions like <code>easeIn</code> and <code>easeOut</code> work in CSS and JQuery.</p>
  <p>Here's a crude illustration of an &quot;easeInOut&quot; type scenario. The line represents time, the <code>o</code>s a function call.</p>
  <p><code>o-o--o---o-----o----------o-----o---o--o-o</code></p>
  <p>Implementation could look something like:</p>
  <pre><code>trigger(5000, &quot;easeInOut&quot;, callback); // Over five seconds, &quot;callback()&quot; is called with an easeInOut ease.
  
  function triggerWithEase(duration, ease, callback){
    // ???
  }
  
  function callback(){
    console.log(&quot;Heyo!&quot;);
  }
  </code></pre>
  <p>Is there a Javascript / JQuery solution for this already? If not, how could this be accomplished?</p>
  <h1>Edit 1:</h1>
  <p>Some inspiration for the timing graph itself:</p>
  <p><a href="http://easings.net/" rel="nofollow noreferrer">http://easings.net/</a></p>
  <h1>Edit 2:</h1>
  <p>I'm impressed with you creative folks who have actually used the little ASCII graph I used in the description as an input to the function! I'm looking for a more mathematical solution to this, though...</p>
  <p>Here's a better illustration of what I'm thinking. This assumes we're using a quadratic formula (ax^2 + bx + c) over a duration of 20 seconds.</p>
  <p>It'd be really cool to pass a function some parameters and have it trigger callbacks at the correct intervals doing something like this:</p>
  <h3>10 calls over 20 seconds</h3>
  <p><img src="https://i.stack.imgur.com/xylSK.jpg" alt="enter image description here" /></p>
  <h3>20 calls over 20 seconds</h3>
  <p><img src="https://i.stack.imgur.com/0N129.jpg" alt="enter image description here" /></p>
  <h2>Edit 3</h2>
  <p>Some completely untested, back-of-the-napkin pseudocode I'm playing with:</p>
  <pre><code>function easeTrigger(callback, functionType, functionOptions, duration, numberOfCalls){
  
      switch(&quot;functionType&quot;){
          case &quot;quadratic&quot;:
              quadtratic(functionOptions);
              break;
          case &quot;sine&quot;:
              sine(functionOptions);
              break;
          /* ... */
          default:
              linear(functionOptions);
              break;
      }
  
      function quadratic(options){
  
          var x = numberOfCalls;
          var result;
          var delay;
          var timer;
  
          for (var i = x - 1; i &gt;= 0; i--) {
              result = a * Math.pow(x, 2) + (b * x) + c;
              delay = result * 1000; // using the result to calculate the time between function calls
          }
  
          // ???
  
          
  
          for (var s = numberOfCalls - 1; s &gt;= 0; s--) {
              delay = result * 1000; // probably need to chain this somehow, a for loop might not be the best way to go about this.
              timer = setTimeout(result, caller);
          }
  
          // ???
  
          // PROFIT!
  
      }
  
      function caller(duration){
          clearTimeout(timer);
          timer = setTimeout(delay, callback);
      }
  
  }
  
  // How this might be implemented...
  
  easeTrigger(callback, &quot;quadratic&quot;, {a: 1, b: 2, c:0}, 5000, 20);
  easeTrigger(callback, &quot;linear&quot;, {a: 1, b: 2}, 5000, 10);
  
  // Callback to call at the end of every period
  
  function callback(){
      console.log(&quot;Yo!&quot;); 
  }
  </code></pre>