文本Shuffle /Javascript

Question

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

HTML可以是这样的：

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

这样做可以达到预期的效果，它会在匹配之前对跨字母进行洗牌，但是，它永远不会退出setInterval，这可能会在一段时间后给页面速度带来麻烦。

它所做的：

• 对于每个跨度，启动一个setTimeout，它增加等待时间X，并触发一个函数。
• 我们设置一个间隔，以显示来自数组的随机字母，直到达到我们所说的洗牌次数。
• 一旦进入最后一次洗牌，它应该用函数结束setInterval，但目前没有发生这种情况。

在这里，我留下了包含代码：https://jsfiddle.net/Lk2z9d4n/的https://jsfiddle.net/Lk2z9d4n/

希望你能帮我解决这个问题，如果有什么可以改进的话，我将非常感激。

Answer 1

使用break而不是return false，并将loop变量传递给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 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>

​

Answer 2

在return中使用IF，然后尝试清除间隔。

  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!!!

将myClear()调用移动到IF之前。

更新的JSfiddle