1

私のページには、javascript setInterval を使用してタイマーでフェードインおよびフェードアウトする複数の要素があり、それらを動かしています。素敵なカスケード効果を作成するために、それらを少しだけオフセットするように遅延させていますが、ページを開いたままにしておくと、すべてが互いに追いつき、タイミングがすべて台無しになります (そのままにしておく必要があります)。数分）。

ここの CodePen で問題の醜い例があります: http://www.cdpn.io/wgqJj

繰り返しますが、問題を確認するには、ページを開いたまま数分間そのままにしておく必要があります。ページにもっと多くの項目 (5 または 10) がある場合、問題はさらに明白になります。また、このタイプの効果をいくつかのjQuery写真回転プラグインで使用しましたが、時間が経つにつれて、常に問題が発生します.

これについて何か説明はありますか？

これが私が使用しているコードです（JavaScriptの方がきれいかもしれません）：

HTML:

<p id="one">First</p>
<p id="two">Second</p>
<p id="three">Third</p>

JavaScript:

$(document).ready(function() {
  var timer1 = setTimeout(startOne,1000);
  var timer2 = setTimeout(startTwo,2000);
  var timer3 = setTimeout(startThree,3000);
});

function startOne () {
  setInterval(flashOne,3000);
}

function startTwo () {
  setInterval(flashTwo,3000);
}

function startThree () {
  setInterval(flashThree,3000);
}

function flashOne () {
  $("#one").fadeTo("slow",0.4).fadeTo("slow",1.0);
}

function flashTwo () {
  $("#two").fadeTo("slow",0.4).fadeTo("slow",1.0);
}

function flashThree () {
  $("#three").fadeTo("slow",0.4).fadeTo("slow",1.0);
}
4

3 に答える 3

1

setInterval代わりにチェーンを使用することを検討してください。これにより、ブラウザーに保証されたスロットが提供されます。このSO 投稿を参照してください。.

現在setInterval、アニメーションを開始するためにのみ使用します。そこから、jQuery は「振動」を処理します。

理論的には、チェーンされた設定間隔を使用すると、ブラウザーに対してスロットが保証されます。さらに重要なことは、最初に 1 回だけではなく、間隔ごとにオフセットをコードにハードコーディングできることです。

于 2013-08-12T20:44:39.600 に答える
1

質問はすでにここで回答されています。このトピックで最も評価の高い回答からの引用:

実行する前に少なくとも 1000 ミリ秒待機しますが、正確に 1000 ミリ秒待機することはありません。

実際の答えを出すと、次のように解決します。

$(function(){
  setTimeout(flashOne,1000);
});

function flashOne () {
  $("#one").fadeTo("slow",0.4).fadeTo("slow",1.0);
  setTimeout(flashTwo,1000);
}

function flashTwo () {
  $("#two").fadeTo("slow",0.4).fadeTo("slow",1.0);
  setTimeout(flashThree,1000);
}

function flashThree () {
  $("#three").fadeTo("slow",0.4).fadeTo("slow",1.0);
  setTimeout(flashOne,1000);
}

このように、前の項目が点滅してから常に 1 秒遅れているため、タイマーが台無しになることはありません。

于 2013-08-12T20:45:10.587 に答える