Cheshire Cheshire - 4 months ago 41
HTML Question

Text Shuffle JQuery/Javascript

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.

Answer

Use break instead of return false and pass the loop variable to the myClear() function.

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;
  var loop = setInterval(function() {
    console.log('running');
    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;
          break;
        }
      }
      myClear(loop);
    }
    i++;
  }, (frames/shuffles));
}

function myClear(loop) {
  console.log('clear interval')
  window.clearInterval(loop);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="title">
  <span>H</span>
  <span>O</span>
  <span>L</span>
  <span>A</span>
</div>

Comments