I'm making a simple text shuffler that after some shuffles, it displays the original text.

The HTML can be something like this:

```
<div class="title">
  <span>H</span>
  <span>O</span>
  <span>L</span>
  <span>A</span>
</div>

```

Javascript:

```
var lettersArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
var loop;
$(document).ready(function() {
  var time = 0;
  $(".title").find("span").each(function() {
    var obj = $(this);
    /*
        @Obj,
        @Letter,
        @NºShuffles
        @Frames = time in ms
    */
    setTimeout(function() {
      shuffleText(obj, obj.text(), 5, 500);
    }, time);
    time = time + 100;
  });
});

function shuffleText(obj, letter, shuffles, frames) {
  var i = 0;
  loop = setInterval(function() {
    console.log("a")
    if (i < shuffles) {
      var random = Math.floor(Math.random() * (lettersArray.length + 1));
      obj.text(lettersArray[random]);
    } else {
      for (var e = 0; e < lettersArray.length; e++) {
        if (letter == lettersArray[e]) {
          obj.text(lettersArray[e]);
          return false;
        }
      }
      myClear();
    }
    i++;
  }, (frames/shuffles));
}

function myClear() {
  window.clearInterval(loop);
}

```

This does what intended, it shuffles the spans letters until it matches, but, it never goes out the setInterval, which may cause trouble on page speed after a while.

What it does:

* For each span, initiates a setTimeout, which increments the wait time X ms, and fires a function.
* We set an interval that will display random letters from the array until it reaches the number of shuffles we said.
* Once hit the last shuffle, it should end the setInterval with the function, but this doesn't happens at the moment.

Here I leave the jsFiddle which contains the code: <https://jsfiddle.net/Lk2z9d4n/>

Hope you can help me with this issue, and if there's something it could be improved, I would be very grateful.