Text Shuffle JQuery/Javascript

Question

Ich mache einen einfachen Text-Shuffler, der nach einigen Verschiebungen den ursprünglichen Text anzeigt.

Die HTML kann so etwas wie dieses:

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

Das tut, was beabsichtigt, es mischt die Spannweiten Buchstaben, bis es passt, aber es geht nie die setInterval aus , was nach einiger Zeit zu Problemen mit der Seitengeschwindigkeit führen kann.

Was es tut:

• Für jeden Bereich, initiiert eine setTimeout, die die Wartezeit X ms erhöht, und eine Funktion ausgelöst wird.
• Wir setzen ein Intervall, das zufällige Buchstaben aus dem Array anzeigen wird, bis es die Anzahl der Shuffle erreicht, die wir sagten.
• Sobald die letzte Shuffle getroffen wurde, sollte das SetInterval mit der Funktion beendet werden, aber das passiert im Moment nicht.

Hier lasse ich die jsFiddle, die den Code enthält: https://jsfiddle.net/Lk2z9d4n/

Hoffe, dass Sie mich mit diesem Problem helfen kann, und wenn es etwas gibt, sie verbessert werden könnte, wäre ich sehr dankbar.

Answer 1

Verwenden break anstelle von return false und passieren die loop Variable auf den myClear() Funktion.

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

Sie verwenden return in der IF und versuchen Sie dann, das Intervall zu löschen.

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

Bewegen Sie den myClear() Anruf vor dem IF.

Updated JSfiddle