setTimeoutを使って背景画像を変更する

Question

私は31の画像を持っていて、それらをdivの背景として次々に表示したいと思います。私は、ユーザーがdivの上を移動するときに変更するだけです。今私の問題は、すべての画像を本当に速く反転させることだけです。 setTimeoutを使用しようとしていますが、動作していません。遅延を働かせるにはどうすればいいですか？ここ div要素の名前はAbout_Me_Blockで、画像がframe1.gifと呼ばれ、frame2.gif ...など

は私のコードです：

function changeImg(counter) { 
    $('#About_Me_Block').attr("style", "background-image: url(playGif/frame" + counter + ".gif);"); 
} 

$(document).ready(function() { 
    var hoverAnimate = [] 
    "use strict"; 
    $('#About_Me_Block').mouseenter(function() { 
     hoverAnimate[0] = true; 
     var counter = 0; 

     while (hoverAnimate[0]) { 
      console.log(counter); 
      setTimeout(changeImg(counter), 1000); 
      counter++; 
      if (counter === 32) 
       hoverAnimate[0] = false; 
     } 
    }); 
    $('#About_Me_Block').mouseleave(function() { 
     hoverAnimate[0] = false; 
     $(this).attr("style", "background-image: url(play.jpeg);"); 
    }); 
}); 

Answer 1

setTimeoutは最後まで機能を待ちません、それは他の言語でのスレッドのスレッド化を行います。

目的を達成するには、changeImg関数からsetTimeoutを呼び出す必要があります。

var counter = 0; 
$(document).ready(function() { 
    var hoverAnimate = [] 
    "use strict"; 
    $('#About_Me_Block').mouseenter(function() { 
     hoverAnimate[0] = true; 
     counter = 0; 
     changeImg(); 
    }); 
    $('#About_Me_Block').mouseleave(function() { 
     hoverAnimate[0] = false; 
     $(this).attr("style", "background-image: url(play.jpeg);"); 
    }); 
}); 

function changeImg() { 
    $('#About_Me_Block').attr("style", "background-image: url(playGif/frame" + counter + ".gif);"); 
    counter++; 
    if (counter < 32 && hoverAnimate[0]) { 
     setTimeout(changeImg, 1000); 
    } else { 
     hoverAnimate[0] = false; 
    } 
} 

Answer 2

つのタイマーのための方法 - のsetTimeoutとのsetInterval（シングル/繰り返し）

// setInterval is also in milliseconds 
var intervalHandle = setInterval(<yourFuncToChangeImage>,5000); 

//this handle loop and make example loop stop 
yourelement.yourEvent = function() { 
clearInterval(intervalHandle); 
}; 

Answer 3

while文が遅延を持っていないため、彼らは一斉に起こる理由があるので、すべてsetTimeoutが設定されます。同時に、changeImgを一度に呼び出すことができます。

この問題を解決するには、setTimeoutをsetIntervalに置き換えます。代わりにwhileを使用しての、あなたはそれが呼び出されるたびに

var counter = 0; 
var myTimer = setInterval(changeImg, 1000); 

ようsetIntervalを呼び出し、changeImg内counterを更新することができます。ループの後、あなたがどのようにsetTimeout作品をよく読んでする必要がありそうです

clearInterval(myTimer) 

Answer 4

することを忘れないでください。本質的には、指定された時間（ミリ秒）が経過した後に関数を実行するように通知します。したがって、setTimeout(changImg(counter), 1000)を実行すると、を返すchangImg(counter)が呼び出されます。その中にはsetTimeout(undefined, 1000)というものがあり、それが本当に速く反転する理由です。だから、

---

、あなたは機能が組み込まそのパラメータを後に呼び出すことができるようにするためにbindを使用することができます。また、一度clearTimeoutで行わアラームを削除してください。

function changeImg(counter) { 
    $('#About_Me_Block').attr("style", "background-image: url(playGif/frame" + counter + ".gif);"); 
} 

$(document).ready(function() { 
    var hoverAnimate = false, id; 
    function loop(counter) { 
     if(hoverAnimate || counter < 32) { 
      changeImg(counter); 
      id = setTimeout(loop.bind(this, counter++), 1000); 
     } 
    } 
    $('#About_Me_Block').mouseenter(function() { 
     hoverAnimate = true; 

     id = setTimeout(loop.bind(this, 0), 1000); 
    }); 
    $('#About_Me_Block').mouseleave(function() { 
     hoverAnimate = false; 
     // Don't want a reminder for a random counter to wake up. 
     clearTimeout(id); 
     $(this).attr("style", "background-image: url(play.jpeg);"); 
    }); 
});