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