私が望む動作は次のとおりです。背景色が金色に変わり、X時間の間その色のままになります。次に、背景色が赤に変わり、Y時間の間その色のままになります。その後、背景色はゴールドに戻り、X時間その色のままになります。その後、背景色が赤に戻り、Y時間その状態が続きます。このキット全体とcaboodleは、ループスタイルでZ回実行され、その後終了します。
setInterval'd関数をforループに入れてみましたが（変更を行った回数をカウントするため）、setInterval自体に設定されたすべての関数が、でインターバルタイマーの実行を開始することがわかりました。同時に（順番にではありません）。
これが明確であることを願っています。これが私の努力のJSFiddleです：http：//jsfiddle.net/6WE6s/3/背景色を均一なパターンで変更することができましたが、上記のパターンが必要で、混乱しています。次はどうする。
助けてくれてありがとう！:)
var colors = [
['gold', 2000], // X = 2000 miliseconds
['red', 1000] // Y = 1000
],
repeat = 3, // Z = 3,
index = 0, // current position in colors array
changeColor = function( ) {
// if index == colors.length then mod = 0
var mod = index % colors.length;
if(!index || mod || --repeat ) {
index = mod;
var data = colors[ index++ ]; // data = [ currentColor, currentColorTimeout ]
document.body.style.background = data[0];
setTimeout( changeColor, data[1] ); // and so on
}
//if index >0 && index == last
//then decrement `repeat` and check if is == 0
//nothing to do :)
};
changeColor(); // run
これは簡単な例です。colors上記のように、arguments（ 、repeats）とその本体を使用して関数を作成できます。
注：
タイムアウトを1回渡すsetIntervalため、この目的には適していませんsetInterval
最初が0の場合repeat、繰り返しは無限になります
使用しないでくださいsetInterval()。あなたとsetTimeout()あなたはこのようなことをすることができます：
function changeColors(colors, repeats) {
var i = 0;
if (typeof repeats === "undefined")
repeats = 1;
function doNext() {
if (i >= colors.length){
if (--repeats > 0)
i = 0;
else
return;
}
$('body').css('background-color', colors[i].color);
setTimeout(doNext, colors[i++].delay);
}
doNext();
}
changeColors([{color : "gold", delay : 2000},
{color : "red", delay : 4000}],
3);
に渡す配列に要素を追加することで、それぞれ独自の遅延を使用して、好きなだけ色を追加できますchangeColors()。関数は順番に色を調べ、パラメータで指定された回数だけシーケンス全体を実行しrepeatsます。
デモ： http： //jsfiddle.net/nnnnnn/6WE6s/10/
これが私の努力です-jQueryは必要ありません：
function colorCycle(el, count, cols) {
var i = 0,
n = cols.length;
// allow this to work on any element given its ID
el = (typeof el === "string") ? document.getElementById(el) : el;
if (n === 0) {
return; // no colours?
} else if (n === 1) {
count = 1; // don't trigger any timers if there's only one colour
}
// all of the hard work is done here
(function repeat() {
var interval = cols[i][1];
el.style.backgroundColor = cols[i][0];
// only do the whole cycle "count" times - 0 = forever
if (++i === n) {
if (count && !--count) {
return;
}
i = 0;
}
setTimeout(repeat, interval); // call myself
})(); // IIFE starts the cycle straight away
};
colorCycle(document.body, 5, [
['red', 1000],
['gold', 500]]);
http://jsfiddle.net/alnitak/42PeT/を参照してください
これを試して
var colors = [];
colors.push({color:"gold", time:4000}); //4000 X length of time
colors.push({color:"red", time:2000}); //2000 Y length of time
var numberofTimes = 50; //50 Z number of times
var $body;
var times = 0; // counter for tracking
var currentColor = {}; //currentColor info can be used to get the current
$(function(){
$body = $('body');
changeBG();
});
function changeBG()
{
currentColor = colors[times % colors.length];
$body.css('background-color',currentColor.color);
times++;
if(times<numberofTimes)
setTimeout(changeBG, currentColor.time);
}
このクイックデモをチェックしてください
setIntervalの使用を控えます。ここを参照してください。
編集：私は呼び出しのさまざまな遅延を逃しました。
var colors = ["#FF0000", "#00FF00", "#0000FF"];
var times = [1000, 2000, 3000];
var backgroundColor = "";
var counter = 0;
var changeBackground = function () {
// if we ran out of colors — do nothing: this simply goes out
// of the function, without continually calling setTimeout.
if (counter >= colors.length)
return;
// you fetch your new color here and increase the counter
// The counter keeps count of how many animations you've done.
backgroundColor = colors[counter];
// increase the counter to point to the next index of colors
// array you'll use in a subsequent call
counter++;
// do your magic voodoo change background animation here.
// I'm just doing a console.log() to be sure this works.
// Your question was framework agnostic, the answer should be too.
console.log(backgroundColor);
// setInterval to repeat
window.setTimeout(changeBackground, times[counter]);
}
window.setTimeout(changeBackground, times[counter]);
色と時間の配列の配列を。で反復する基本的な例setTimeout。
(function() {
var i = 0,
colorsTimes = [['gold', 'red', 'gold', 'red', 'gold'],
[2000, 4000, 2000, 4000, 2000]];
function switchColors() {
setTimeout(function() {
$('body').css('background-color', colorsTimes[0][i]);
if (++i < colorsTimes[0].length) switchColors();
}, colorsTimes[1][i]);
}
switchColors();
}());
setTimeoutの使用：
var doCount = (function() {
var count = 0;
var interval;
var limit = 5; // default
return function(num) {
limit = num || limit;
if (count < limit) {
count++;
console.log('running number ' + count);
interval = setTimeout(arguments.callee, 1000);
} else {
interval && clearTimeout(interval);
}
}
}())
setIntervalの使用：
var doCount = (function() {
var count = 0;
var interval;
var limit = 5; // default
return function(num) {
limit = num || limit;
if (interval) {
if (++count >= limit) {
interval && clearInterval(interval);
}
console.log('running number ' + count);
} else {
interval = setInterval(arguments.callee, 1000);
}
}
}())
setTimeoutの利点は、実行間の時間を調整してより規則的にすることができることです。setIntervalは、可能な限り規則的に実行しようとします。