Text Shuffle JQuery/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毫秒，并触发功能。
• 我们设置一个间隔，它将显示数组中的随机字母，直到达到我们所说的混洗数量。
• 一旦命中最后一个shuffle，它应该用该函数结束setInterval，但此时不会发生。

这里，我离开它包含代码的jsfiddle：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); 
 
    /* 
 
    \t @Obj, 
 
    \t @Letter, 
 
    \t @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

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

移动IF前myClear()电话。

Updated JSfiddle