文本洗牌JQuery/Javascript

我正在制作一个简单的文本洗牌器，经过一些洗牌后，它会显示原始文本

HTML可以是这样的：

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

H
O
L
A.

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);
}

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回路；
$（文档）.ready（函数（）{
var时间=0；
$（“.title”）.find（“span”）.each（函数（）{
var obj=$（本）；
/*
@Obj，
@信，
@洗牌
@帧=时间（毫秒）
*/
setTimeout（函数（）{
shuffleText（obj，obj.text（），5500）；
}，时间）；
时间=时间+100；
});
});
函数shuffleText（对象、字母、混洗、帧）{
var i=0；
循环=设置间隔（函数（）{
控制台日志（“a”）
if（i

这会达到预期效果，它会洗牌跨距字母，直到匹配为止，但它不会超出设置间隔，这可能会在一段时间后对页面速度造成问题

它的作用是：

• 对于每个跨度，启动一个setTimeout，将等待时间增加X ms，并启动一个函数
• 我们设置了一个间隔，它将显示数组中的随机字母，直到达到我们所说的洗牌次数
• 一旦点击了最后一次洗牌，它应该用函数结束setInterval，但此时不会发生这种情况

在这里，我留下了JSFIDLE，其中包含以下代码：

---

希望您能帮助我解决这个问题，如果有什么可以改进的地方，我将不胜感激。

您可以在

if

中使用

return

，然后尝试清除间隔

  for (var e = 0; e < lettersArray.length; e++) {
    if (letter == lettersArray[e]) {
      obj.text(lettersArray[e]);
      return false; //ends function HERE
    }
  }
  myClear(); //never gets here!!!

for（变量e=0；e

将

myClear（）

调用移动到

IF

之前

---

使用

break

而不是

return false

，并将

循环

变量传递给

myClear（）

函数

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回路；
$（文档）.ready（函数（）{
var时间=0；
$（“.title”）.find（“span”）.each（函数（）{
var obj=$（本）；
/*
@Obj，
@信，
@洗牌
@帧=时间（毫秒）
*/
setTimeout（函数（）{
shuffleText（obj，obj.text（），5500）；
}，时间）；
时间=时间+100；
});
});
函数shuffleText（对象、字母、混洗、帧）{
var i=0；
var loop=setInterval（函数（）{
console.log（'running'）；
if（i

H
O
L
A.

到JSFIDLE的链接在哪里？@GauthamanSahadevan ups！忘记添加了，现在是！在循环中使用break而不是returnfalse，使用return将触发另一个setInterval函数，clearInterval将永远不会是firedOh，这就是为什么。非常感谢你的回答！这对我帮助很大。当然，快乐编码；）谢谢你的回答。这也有帮助！