なぜこのコード（jquery each。）は1日後に停止するのですか？

Question

私のサイトの上部に通知と呼ばれるdivがあります。 私は、テキストの配列を順番に調べて、30秒ごとにdiv内に各値を順に表示したいと考えています。

私が書いた以下のコードは動作しません。何度か試してみましたが、何も問題はありません。

var my_array = ["first text", "second text", "third text"]; 

jQuery.each(my_array, function(index, value) { 
    jQuery('.notifications').replaceWith(value).delay(500); 
}); 

Answer 1

delay()方法は、あなたがreplaceWith()方法でそれを使用することはできませんので、アニメーションキューの遅延を提供するために使用されます。第2に、replaceWith()は要素全体をDOMツリーの新しい要素に置き換えます。したがって、2番目の繰り返しでは、要素が既に置き換えられているため、何も選択しません。jQuery('.notifications')

setIntervalメソッドを使用し、要素全体を置換する代わりに、text()メソッドを使用して要素の内容を更新するだけです。

var my_array = ["first text", "second text", "third text"]; 
 

 
// variable for counting 
 
var i = 0; 
 

 
// initialize interval and cache the return id 
 
// to clear the interval later 
 
var inter = setInterval(change, 500); 
 
// call the function to execute initially 
 
change(); 
 

 
function change() { 
 
    // update the content 
 
    jQuery('.notifications').text(my_array[i++]); 
 
    // check count reache the length of array 
 
    if (i == my_array.length) 
 
    // if reached length of array then clear the interval 
 
    clearInterval(inter); 
 
}

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