<!doctype html>
<html>
  <body>
    <h2>Ukkonen's Algorithm: A Visual Guide</h2>
    <input id="input" type="text" value="xabxa$">
    <div id="svgDiv">
      <!-- Target for dynamic svg generation -->
    </div>
    <style>
      svg {max-width: 100%;}
    </style>
  </body>
  <script src="lib/viz.min.js"></script>
  <script src="suffix_tree.js"></script>
  <script>
    // Display each phase of the Suffix Tree for the string in the input.

    // Initialise
    var suffix_tree = window.SuffixTree({noInitialRun: true});

    // DOM nodes
    var svgDiv = document.getElementById('svgDiv');
    var input = document.getElementById('input');

    var render = function() {
      svgDiv.innerHTML = '';
      var str = input.value
      for (var i = 1, len = str.length; i <= len; ++i) {
        var slice = str.slice(0, i);
        var tree = Viz(suffix_tree.print_tree(slice), "svg");
        svgDiv.insertAdjacentHTML('beforeend', tree);
      }

    // A super-simple debouncer
    var debounce = function(func, wait) {
      var timeout;
      var later = function() {
        func.call();
      };
      return function() {
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
      };
    };

    // Add events
    document.addEventListener("DOMContentLoaded", render);
    input.addEventListener("input", render);

  </script>
</html>

<!doctype html>
<html>
  <body>
    <h2>Ukkonen's Algorithm: A Visual Guide</h2>
    <input id="input" type="text" value="xabxa$">
    <div id="svgDiv">
      <!-- Target for dynamic svg generation -->
    </div>
    <style>
      svg {max-width: 100%;}
    </style>
  </body>
  <script src="lib/viz.min.js"></script>
  <script src="suffix_tree.js"></script>
  <script>
    // Display each phase of the Suffix Tree for the string in the input.

    // Initialise
    var suffix_tree = window.SuffixTree({noInitialRun: true});

    // DOM nodes
    var svgDiv = document.getElementById('svgDiv');
    var input = document.getElementById('input');

    var render = function() {
      svgDiv.innerHTML = '';
      var str = input.value
      for (var i = 1, len = str.length; i <= len; ++i) {
        var slice = str.slice(0, i);
        var tree = Viz(suffix_tree.print_tree(slice), "svg");
        svgDiv.insertAdjacentHTML('beforeend', tree);
      }

    // A super-simple debouncer
    var debounce = function(func, wait) {
      var timeout;
      var later = function() {
        func.call();
      };
      return function() {
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
      };
    };

    // Add events
    document.addEventListener("DOMContentLoaded", render);
    input.addEventListener("input", debounce(render, 250));

  </script>
</html>

Use the debouncer function when calling render.
Use the debouncer function when calling render.
