debounce vs throttle

by Farzad YZ

HTML

<html>

  <head>
    <title>debounce & throttle demo</title>
    <style>
      body {
        font-family: "Roboto", "Helvetica", Arial;
        font-weight: 200;
        color: #777;
      }

      #moveonme {
        width: 200px;
        height: 600px;
        background: #f5f5f5;
        border: 1px solid #aaa;
        float: left;
        box-sizing: border-box;
        padding: 25px;
        text-align: center;
        font-size: 18px;
      }

      .backtoblog {
        width: 200px;
        padding: 10px;
        background: #f5f5f5;
        border: 1px solid #aaa;
        color: #777;
        display: inline-block;
        text-decoration: none;
        transition: 0.2s all;
        box-sizing: border-box;
        position: relative;
        top: -1px;
        text-align: center;
      }

      .backtoblog:hover {
        border: 1px solid #aaa;
        background: transparent;
      }

    </style>
  </head>

</html>





<div id="moveonme">
  move your mouse here
</div>
<canvas id="paintonme" height="600" width="600" style="float:right;"></canvas>

<a href="http://blog.nimius.net/2014/04/javascript-debounce-throttle/" class="backtoblog">
  < zur&uuml;ck zum Blog</a>

JavaScript

/**
 * Created by thephpjo on 21.04.14.
 */


var helpers = {

  /**
   * debouncing, executes the function if there was no new event in $wait milliseconds
   * @param func
   * @param wait
   * @param scope
   * @returns {Function}
   */
  debounce: function(func, wait, scope) {
    var timeout;
    return function() {
      var context = scope || this,
        args = arguments;
      var later = function() {
        timeout = null;
        func.apply(context, args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  },

  /**
   * in case of a "storm of events", this executes once every $threshold
   * @param fn
   * @param threshhold
   * @param scope
   * @returns {Function}
   */
  throttle: function(fn, threshhold, scope) {
    threshhold || (threshhold = 250);
    var last,
      deferTimer;
    return function() {
      var context = scope || this;

      var now = +new Date,
        args = arguments;
      if (last && now < last + threshhold) {
        // hold on to it
        clearTimeout(deferTimer);
        deferTimer = setTimeout(function() {
          last = now;
          fn.apply(context, args);
        }, threshhold);
      } else {
        last = now;
        fn.apply(context, args);
      }
    };
  }
}



/**
 * Created by thephpjo on 21.04.14.
 */


function NIM_demo() {
  this.canvas = document.getElementById("paintonme");
  this.context = this.canvas.getContext("2d");

  this.movearea = document.getElementById("moveonme");

  this.canvasTimeScale = 5 * 1000;

  this.paintColors = ["#bbd", "#464", "#d88"];
  this.totalLanes = this.paintColors.length;

  this.leftMargin = 100;

  var self = this;

  this.init = function() {
    this.canvas.width = window.innerWidth - 250;
    this.flush();
    this.movearea.addEventListener("mousemove", this.regularHandler);
    this.movearea.addEventListener("mousemove", helpers.debounce(self.debounceHandler, 100, this));
    this.movearea.addEventListener("mousemove",...