一部のコードが実行されるときに間隔を設定しようとしていますが、存在する要素の数に基づいてのみ行う必要があります。簡単な例を次に示します。
合計 5 つの要素
見つかった要素ごとに 20 秒ごとにコードを実行します。
プレーンな JavaScript を使用してこれを行う方法の基本的な例を教えてください。私が試したことはすべて、一度に 1 つの要素を実行するのではなく、すべてのコードを一度に実行するだけです。
一部のコードが実行されるときに間隔を設定しようとしていますが、存在する要素の数に基づいてのみ行う必要があります。簡単な例を次に示します。
合計 5 つの要素
見つかった要素ごとに 20 秒ごとにコードを実行します。
プレーンな JavaScript を使用してこれを行う方法の基本的な例を教えてください。私が試したことはすべて、一度に 1 つの要素を実行するのではなく、すべてのコードを一度に実行するだけです。
配列またはDOMコレクションの要素について話しているとしましょう
(function() {
var arr = [...],
len = arr.length;
(function doProcess() {
if (len--) {
/* do something with arr[len] */
setTimeout(doProcess, 20000);
}
})();
})();
編集:何らかの理由で配列を元に戻すことができない場合は、次のバージョンを使用してください
(function() {
var arr = [...],
len = arr.length;
(function doProcess(i) {
if (i) {
console.log(len - i);
/* do something with arr[len - i] */
setTimeout(function() { doProcess(--i); }, 20000);
}
})(len);
})();
jQueryを使用して画像をアニメーション化するために行ったコードを次に示します。
var enter = 500;
var show = 4000;
var exit = 300;
var direction1 = "right";
var direction2 = "left";
var logo = document.getElementById('Box1').getElementsByTagName('img');
var Num = $('#Box1 img').length;
var time_each = (enter+show+exit);
function startBox1(){
for(x=0;x<=Num-1;x++){
Box1(x);
}
}
function Box1(x){
var buffer = time_each*x;
$(logo[x]).delay(buffer).show("slide", { direction: direction1 }, enter).delay(show).hide("slide", { direction: direction2 }, exit);
}
$(function(){
startBox1();
setInterval("startBox1()",(time_each)*Num);
});
トリックは、現在のアニメーションのインデックスによって各アニメーションにかかった時間と等しいバッファーを設定することでした。ループは各FOR
コードをすぐに実行します。アクションとバッファ変数により、.delay()
各アニメーションが次々と起こっているように見えます。次に、すべてのアニメーションが完了するたびsetInterval()
にループを呼び出します。FOR
プロセスを継続的に再起動します。
関数を定義する必要があり、関数内でタイムアウトを設定する必要があります。このような:
var els = [1, 2, 3, 4, 5];
((function process_els(el_index) {
var el = els[el_index];
// do stuff to el here
console.log(el);
// do stuff to el above
if (el_index + 1 < els.length) {
setTimeout(function() { process_els(el_index + 1); }, 20000);
}
})(0);