setInterval を回避し、呼び出しをリストの長さにバインドするだけの場合は、クロージャーからのインデックスを使用する代わりに、現在のインデックスを保存する自己実行関数を作成できます。setTimeout 関数の変数が読み取られるずっと前にループが終了するため、クロージャーの変数は常に各ループの最後の要素になります。
また、clearTimeout 関数を呼び出していますが、このコンテキストではあまり意味がありません。
その上、すべての setTimeouts がほぼ同時に呼び出されます。これにより、画面上ですべての値がミリ秒間隔で点滅します (場合によっては速すぎて表示されません)。setTimeout 関数は非同期であるため、ここではループは適切ではありません。コールバックのシステムは実行回数が有限である場合に最適であり、setInterval システムは実行回数が不明な場合に最適です。私にとって、実行回数はjQueryオブジェクトの要素数(現在$.each()を通過しているもの)である必要があります。
質問の次の一般化された例のようなことを行うことをお勧めします(私はあなたのdomにアクセスできないため、一般化されています)。
function showMessage(message){
$('body').html(message);
}
var itemData = [1,2,3,4];
var i = 0;
function idTimer(list, i) {
if (!(i >= 0)) {
i= 0;
}
setTimeout((function(msg){
i++;
return function(){
if(i < list.length){
idTimer(list, i);
}
showMessage(msg);
}
})(list[i]), 1000);
}
idTimer(itemData);
このコードのライブ デモは、http: //jsbin.com/ifuqoにあります。