3

こんにちは、これは非常に密接に基づいています:

jqueryはさまざまな背景をループします

この解決策は私にとってはうまくいきましたが、ドキュメントの準備ができたときに背景を変更したくありません-関数によってトリガーされる必要があります。何らかの理由で、これにより背景の変化が速すぎます。一度に 3 つちらつくため、どこかでループがオーバーランしているように見えます。

function run()
{
// Set multicolour backgrounds
window.setInterval( multicolour(), 3000);
}

var colour = 0;
var colours = Array('', 'pink', 'red', 'green', 'light');

function multicolour()
{
    colour = (colour+1) % colours.length ;
    $('body').attr('id', colours[colour]);
    console.log(colour);
}

参考までに、コンソール ログには、3 秒ごとに 1 回変化するのではなく、3 秒ごとに 3 回色がちらつくことが示されています。ヘルプ？

4

5 に答える 5

2

再帰setTimeoutを使用し、意図しないコードの上書きによって上書きされる一般的なタイマー変数を使用します。

window._timers = {
  changeBackground : null
};

var colour = 0;
var colours = Array('', 'pink', 'red', 'green', 'light');

function multicolour()
{
    colour = (colour+1) % colours.length ;
    $('body').attr('id', colours[colour]);

    // Set multicolour backgrounds
    clearTimeout(window._timers.changeBackground);
    window._timers.changeBackground = setTimeout(multicolour, 3000);
}

デモ： http： //jsfiddle.net/FgkWx/

于 2012-08-31T16:04:53.380 に答える
2

いくつかの構文の問題。に渡す必要がありfunction referenceますwindow.setInterval

また、配列宣言をクリーンアップしました。私は jQuery を持っていないので、このコードを実行しようとはしませんでした。

function run()
{
  // Set multicolour backgrounds
  window.setInterval( multicolour, 3000);
}

var colour = 0;
var colours = ['', 'pink', 'red', 'green', 'light'];

function multicolour()
{
  colour = (colour+1) % colours.length ;
  $('body').attr('id', colours[colour]);
  console.log(colour);
}

うーん....グローバル空間を汚染しないこれを試してみてください:これはいくつかのより高度なJavascriptメソッドを使用しますが、この方法では「色」と「色」がグローバル空間に漏れて物を汚染しません。

var changeBackground = (function() {

  var colour = 0;
  var colours = ['', 'pink', 'red', 'green', 'light'];

  return function() {
    colour = (colour+1) % colours.length ;
    document.body.id =  colours[colour];
    console.log(colour);

  };

}());

window.setInterval( changeBackground, 3000);
于 2012-08-31T16:05:50.587 に答える
0

setInterval宣言でコールバック関数を呼び出しています。

window.setInterval( multicolour(), 3000);

これを試して：

window.setInterval( multicolour, 3000);
于 2012-08-31T16:09:01.193 に答える
0

次のように機能します。

var colour = 0;
var colours = Array('', 'pink', 'red', 'green', 'light');

function multicolour(){
    colour = (colour+1) % colours.length ;
    $('body').attr('id', colours[colour]);
    console.log(colour);
}

setInterval( multicolour, 3000);

関数の戻り値ではなく、関数参照を setInterval 関数に渡す必要があります。

働くフィドル

于 2012-08-31T16:11:22.860 に答える
0

元の質問の回答には、欠落していた(正しい)再帰呼び出しがありました:

setTimeout(changeBackground, 2000); // called from changeBackground()

multicolour()ここでの例では、setTimeout を使用して再帰的に自分自身を呼び出す必要はありません

于 2012-08-31T16:05:35.157 に答える