さて、私はjqueryを使用していません。おそらく、あなたが何を達成しようとしているのかについての手がかりはありません。しかし、私が理解していることから、あなたはこのようなことをすべきだと思います：
var i = 0;
var t = this;
var timer = new DeltaTimer(function (time) {
// your animation
var x = t.s[i];
x.delay("1000").css("background-color", "#FAAF16");
delete t.s[i];
t.s.push(x);
// increment i
i++;
}, 1000);
var start = timer.start();
ここで、私が。というコンストラクターを使用したことに気付くでしょうDeltaTimer。このコンストラクターは、この要点で定義されています。startこれにより、関数を使用してアニメーションを正確に制御できますstop。render渡される関数には、である引数が与えられtimeますDate。この式は、time - start関数が呼び出された正確な時刻を示します（たとえば、、、、4... ）。10002000
またはを使用DeltaTimerする利点は次のとおりです。setTimeoutsetInterval
- それは自分自身を修正します。これは、アニメーションがよりスムーズになり、ラグが少なくなることを意味します。
- タイマーを開始および停止することにより、アニメーションを制御できます。
- 関数呼び出しの正確な時刻が関数に渡されます。これは、どのフレームがレンダリングされているか、スプライトがどこにレンダリングされるべきかなどを追跡するのに役立ちます。
- アニメーションのロジックは、タイミング制御のロジックから分離されています。したがって、コードはよりまとまりがあり、より緩く結合されます。
デルタタイミングに関する他の回答は、ここ、ここ、ここで読むことができます。
編集1：それは実際にはかなり簡単です。配列の最初の要素をシフトアウトし、処理してから、最後にプッシュバックするだけです。ロジックは次のとおりです。
function loopIterate(array, callback, interval) {
var timer = new DeltaTimer(function (time) {
var element = array.shift();
callback(element, time - start);
array.push(element);
}, interval);
var start = timer.start();
};
これで、配列を作成し、次のようにループすることができます。
var body = document.body;
loopIterate([1, 2, 3], function (element, time) {
body.innerHTML += element + ": " + time + "<br/>";
}, 1000);
ここで出力を見ることができます：http：//jsfiddle.net/aGQfr/
編集2：おっと、問題が見つかりました。私が理解していることから、現在の要素の処理が終了してから一定の時間、次の要素を処理したいと考えています。私のデルタタイミングスクリプトはそれをしません。一定の時間間隔でのみ機能を実行します。
したがって、デルタタイミングはまったく必要ありません。setTimeout各要素が処理された後に呼び出す必要があります。
function loopIterate(array, callback, interval) {
var start = + new Date;
process();
function process() {
var element = array.shift();
callback(element, new Date - start);
array.push(element);
setTimeout(process, interval);
}
};
その後、配列を作成し、次のようにループします。
loopIterate([1, 2, 3], function (element, time) {
alert(element);
}, 1000);
ここでデモを見ることができます（ブラウザが気に入らない場合があることに注意してください）：http：//jsfiddle.net/aGQfr/1/
編集3：メソッド1と2を組み合わせて、次のようなスクリプトを作成することもできます。
- 処理が終了するのを待ってから、処理する次の要素をイベントキューに追加します。
startandstop関数を使用して制御できます。- コールバックが呼び出された正確な時間を示します。
- 処理をタイミング制御から分離します。
次のメソッドを使用してLoopIteratorイテレータオブジェクトを返すというコンストラクター関数を作成します。startstop
function LoopIterator(array, callback, interval) {
var start, iterate, timeout;
this.start = function () {
if (!iterate) {
start = + new Date;
iterate = true;
loop();
}
};
this.stop = function () {
if (iterate) {
clearTimeout(timeout);
iterate = false;
}
};
function loop() {
var element = array.shift();
callback(element, new Date - start);
array.push(element);
if (iterate) timeout = setTimeout(loop, interval);
}
}
これで、次のように新しいイテレータを作成して開始できます。
var iterator = new LoopIterator([1, 2, 3], function (element, time) {
alert(element);
}, 3000);
iterator.start();
必要に応じて、マウスが要素上または要素外に移動したときに、イテレータを停止および開始することもできます。
var div = document.getElementsByTagName("div")[0];
div.addEventListener("mouseout", iterator.start, false);
div.addEventListener("mouseover", iterator.stop, false);
停止するとイテレータの状態が保持され、再開すると中断したところから続行されます。
ここでデモを見ることができます：http：//jsfiddle.net/PEcUG/
編集4：では、単純なスライダーを作成しますか？HTML、CSS、JavaScriptの順に始めましょう。
HTML：
<div class="slider">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</div>
divと呼ばれるクラスを持つ要素sliderがあります（ページに複数のスライダーがある可能性があるため）。各スライダーには、クラスを持つ0個以上のdiv要素がありslideます。各スライドには任意のコンテンツが含まれる場合があります。スライダーにもボタンがありますが、JavaScriptによって自動的に生成されるため、これはHTMLに含まれていません。冗長性はありません。また、どのスライドにも手動で番号が付けられていないことに注意してください。すべてがJavaScriptによって処理されます。
CSS：
.slide {
background-color: #EEEEEE;
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
border-radius: 0.25em;
display: none;
padding: 1em;
}
.slider-button {
background-color: #CCCCCC;
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
border-radius: 0.25em;
cursor: pointer;
float: right;
height: 1.25em;
margin: 0.5em;
width: 1.25em;
}
好みに合わせて任意のCSSを指定できます。ただし、重要な点は、スライドを最初に非表示にする.slide必要があるため、この必要があるということです。display: none;また.slider-button、持っている必要がありますfloat: right;。右に浮かぶ要素は順序が逆になるため、これは重要です。したがって、最初のボタンは実際には最後のボタンです。これはJavaScriptで正しく処理する必要があるため、何をしているのかわからない場合は変更しないでください。
JavaScript：
了解しました。このボトムアップについて説明します。
window.addEventListener("DOMContentLoaded", function () {
var sliders = document.querySelectorAll(".slider");
var length = sliders.length;
for (var i = 0; i < length; i++)
new Slider(sliders[i], 2000);
}, false);
Slider渡されたスライダー要素を初期化して開始するコンストラクター関数を次に示します。2番目の引数として2つのスライド間の時間間隔を受け入れます。のコードは次のSliderとおりです。
function Slider(slider, interval) {
var slides = slider.querySelectorAll(".slide");
var iterate, start, timeout, delay = interval;
slides = Array.prototype.slice.call(slides);
var buttons = [], numbers = [], goto = [];
var length = slides.length;
for (var i = 0; i < length; i++) {
var button = document.createElement("div");
button.setAttribute("class", "slider-button");
slider.appendChild(button);
buttons.unshift(button);
numbers.push(i + 1);
var handler = getHandler(length - i);
button.addEventListener("click", handler, false);
goto.unshift(handler);
}
this.goto = function (index) {
var gotoSlide = goto[index];
if (typeof gotoSlide === "function")
gotoSlide();
};
slider.addEventListener("mouseover", stop, false);
slider.addEventListener("mouseout", start, false);
this.start = start;
this.stop = stop;
showSlide();
start();
function start() {
if (!iterate) {
iterate = true;
start = + new Date;
timeout = setTimeout(loop, delay);
}
}
function stop() {
if (iterate) {
iterate = false;
clearTimeout(timeout);
delay = interval - new Date + start;
}
}
function loop() {
hideSlide();
slideSlider();
showSlide();
if (iterate) {
start = + new Date;
timeout = setTimeout(loop, interval);
}
}
function hideSlide() {
slides[0].style.display = "none";
buttons[0].style.backgroundColor = "#CCCCCC";
}
function slideSlider() {
slides.push(slides.shift());
buttons.push(buttons.shift());
numbers.push(numbers.shift());
}
function showSlide() {
slides[0].style.display = "block";
buttons[0].style.backgroundColor = "#FAAF16";
}
function getHandler(number) {
return function () {
hideSlide();
while (numbers[0] !== number) slideSlider();
showSlide();
};
}
}
コードはかなり自明です。のすべてのインスタンスにSliderは、より細かく制御するためのstart、stopおよびメソッドがあります。gotoこのgotoメソッドは、スライドのインデックス番号を取ります。nスライドの場合、インデックスの範囲はから0ですn - 1。それでおしまい。
スライダーのデモはここにあります：http：//jsfiddle.net/SyTFZ/4/