2

私はJavaScript/jQueryにかなり慣れていませんが、背景画像を変更するスクリプトを作成しました。

最初のスクリプト

最初のスクリプトバージョンは正常に動作し、次のことを行います。

  • 7秒ごとに実行する関数backgroundChange（）を呼び出すsetIntervalタイマーを作成します
  • 次の画像のURLを決定します
  • 背景画像を設定します

これはうまく機能しますが、問題はWebサイトがライブの場合、接続が遅いと、次のタイマー変更に間に合うように背景画像が読み込まれないことです。

新しいスクリプト

したがって、新しいバージョン：

  • 関数backgroundChange（）を呼び出して7秒後に実行するsetTimeoutタイマーを作成します

var theTimer = setTimeout(backgroundChange, 7000);

  • clearsTimeout（確かにこれを実行する必要はありませんか？）

window.clearTimeout(theTimer);

  • 次の画像のURLを決定します
  • 画像が読み込まれるまで待機します。
  • 次に、背景画像を設定します
  • 次に、新しいsetTimeoutタイマーを追加します

$('#testImage').attr('src', imageText).load(function() {

    $('#backgroundTop').fadeIn(timeIn,function() 
    {
         theTimer = setTimeout(backgroundTimer, 7000);
    });

});

問題は、タイマーが実行され、.load関数に存在するたびに、タイマーが2倍の回数呼び出されるように見えることです。

誰かが私のコードを修正するのではなく、最初に私の理解が正しいことを確認したいので、私はまだ意図的にコードを投稿していません。

とてもタ。

4

2 に答える 2

3

バインドを解除する代わりに、タイマー関数にJavaScriptクロージャを使用できます。これにより、呼び出されるたびにリセットされる単一のタイマーが維持されます。

var slideTimer = (function(){
      var timer = 0;

      // Because the inner function is bound to the slideTimer variable,
      // it will remain in score and will allow the timer variable to be manipulated.

      return function(callback, ms){
           clearTimeout (timer);
           timer = setTimeout(callback, ms);
      };  
})();

次に、コードで：

$('#testImage').attr('src', imageText).load(function() {

    $('#backgroundTop').fadeIn(timeIn,function() 
    {
         slideTimer(backgroundTimer, 7000);
    });
});

コード内の他の場所でタイマーをクリアまたは設定する必要はありません。

于 2013-01-20T14:02:01.913 に答える
2

次のロードハンドラーを追加する前に、ロードハンドラーのバインドを解除する必要があります。これは、コードがそのままの状態でロードハンドラーが積み重なっていくためです。反復するたびに、まったく同じことを行うハンドラーを追加します。unbind再接続する前に、古いハンドラーを削除するために使用します。

$('#testImage').unbind('load');
于 2013-01-20T13:57:30.270 に答える