Text Shuffle JQuery/Javascript

Question

Я делаю простой текстовый shuffler, который после некоторых перетасовки отображает исходный текст.

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 с помощью функции, но в данный момент это не происходит.

Здесь я оставляю 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

Вы используете 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.

Updated JSfiddle