setInterval（）を使用してループを代用する

Question

遅延を持って配列を連続的に反復したいとします。以下の例では、setInterval（）を使用しました。それは大丈夫ですが、これを実現するにはより良い方法があるのでしょうか？

---

var message = "Lorem ipsum dolor sit amet"; 
var print = message.split(" "); 


var iterateOverMsg = function(arr) { 
    $('p').hide().append(arr[0]).fadeIn(3000).fadeOut(2000); 
    var i = 1; 
    setInterval(function() { 
     $('p').hide().text(arr[i]).fadeIn(3000).fadeOut(2000); 
     i++; 
     if (i >= arr.length) { 
      i = 0; 
     } 
    }, 5000); 
}(print); 

---

https://jsfiddle.net/Tzaru/94oym3yn/

Answer 1

あなたはいくつかの方法でこれを改善することができます。まず、モジュロ演算子を使用して、配列の境界を超えて検出する必要なしに、配列の周りの増分数を「ラップ」することができます。次に、再帰を使用して配列を無限ループすることができます。最後に、setTimeout()を使用してタイミングが同期しないようにすることができます。質問が最適化/改善点を探しているとCodeReviewsはそれのための正しいポータルですので、私は、オフトピックとして、この質問を閉じるために投票しています

var print = "Lorem ipsum dolor sit amet".split(" "); 
 

 
function iterateOverMsg(arr, i) { 
 
    $('p').hide().text(arr[i % arr.length]).fadeIn(3000).fadeOut(2000); 
 
    setTimeout(iterateOverMsg.bind(this, arr, ++i), 5000); 
 
} 
 
iterateOverMsg(print, 0);

.dynamicText { 
 
    font-size: 3em; 
 
    text-align: center; 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="dynamicText"></p>