私のウェブサイトでは、画像を切り替えるためのjsを使用していますが、画像を2回目にクリックしたときに遅延が必要です。遅延時間は1000msです。つまり、img.jpgをクリックするとimg_onclick.jpgが表示されます。次にimg_onclick.jpgの画像をクリックすると、img.jpgが再び表示されるまで1000msの遅延が必要です。
以下はそのコードです。
jQuery(document).ready(function($) {
$(".toggle-container").hide();
$(".trigger").toggle(function () {
$(this).addClass("active");
$(".trigger").find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg');
}, function () {
$(this).removeClass("active");
$(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
});
$(".trigger").click(function () {
$(this).next(".toggle-container").slideToggle();
});
});
setTimeout()`を使用してください。
var delayInMilliseconds = 1000; //1 second
setTimeout(function() {
//your code to be executed after 1 second
}, delayInMilliseconds);
もし、setTimeout
を使わずにやりたいのであれば。この質問]1を参照してください。
javascriptのタイマー関数には、2種類(主に使用される)の setTimeout
と setInterval
があります(その他)。
これらのメソッドはどちらも同じシグネチャを持っています。これらのメソッドは、コールバック関数と遅延時間をパラメータとして受け取ります。
setTimeoutは遅延時間後に一度だけ実行されるのに対し、
setInterval`は遅延時間がミリ秒経過するごとにコールバック関数を呼び出し続けます。
これらのメソッドはどちらも整数の識別子を返し、タイマーが切れる前にそれらをクリアするのに使用できます。
clearTimeoutおよび
clearIntervalは,上記の関数
setTimeoutおよび
setInterval` から返された整数の識別子を受け取ります。
Example:
alert("before setTimeout");
setTimeout(function(){
alert("I am setTimeout");
},1000); //delay is in milliseconds
alert("after setTimeout");
上記のコードを実行すると、setTimeoutの前に警告し、setTimeoutの後に警告し、最終的に1秒(1000ms)後にI am setTimeout`警告することがわかります。
この例から気づくことは、setTimeout(...)
が非同期であるということです。つまり、次のステートメントに進む前にタイマーが経過するのを待たないということです。
例:。
alert("before setInterval"); //called first
var tid = setInterval(function(){
//called 5 times each time after one second
//before getting cleared by below timeout.
alert("I am setInterval");
},1000); //delay is in milliseconds
alert("after setInterval"); //called second
setTimeout(function(){
clearInterval(tid); //clear above interval after 5 seconds
},5000);
上記のコードを実行すると、before setInterval`とafter setInterval`が警告され、最後に1秒(1000ms)後にI am setInterval`が5回警告されます。これは、setTimeoutが5秒後にタイマーをクリアするためです。
ブラウザの内部ではどのようになっているのでしょうか。
簡単に説明します。
これを理解するには、javascriptのイベントキューについて知る必要があります。ブラウザにはイベントキューが実装されています。jsでイベントが発生すると、これらのイベント(クリックなど)はすべてこのキューに追加されます。 ブラウザは、実行するものがないとき、キューからイベントを取り出し、それらを1つずつ実行します。
ここで、setTimeout
やsetInterval
を呼び出すと、コールバックがブラウザのタイマーに登録され、指定された時間が経過するとイベントキューに追加され、最終的にjavascriptがキューからイベントを取り出して実行します。
このようなことが起こるのは、javascriptエンジンがシングルスレッドで、一度に一つのことしか実行できないからです。そのため、他のjavascriptを実行したり、タイマーを追跡したりすることができません。そのため、これらのタイマーはブラウザに登録され(ブラウザはシングルスレッドではありません)、タイマーを追跡し、タイマーが切れた後にイベントをキューに追加することができるのです。
setInterval`でも同じことが起こりますが、この場合、イベントは指定された間隔の後、クリアされるかブラウザのページがリフレッシュされるまで、何度もキューに追加されます。
注釈
これらの関数に渡すdelayパラメータは、コールが実行されるまでの最小遅延時間 コールバックを実行する時間です。これは、タイマーの時間切れ後に ブラウザはイベントをキューに追加し、javascriptエンジンが実行するためです。 しかし、コールバックが実行されるかどうかは、イベントのキュー内での しかし、コールバックの実行は、キュー内のイベントの位置に依存し、エンジンはシングルスレッドであるため エンジンはシングルスレッドであるため、キュー内のすべてのイベントを1つずつ実行します。
そのため、他のコードがスレッドをブロックし、キュー内のイベントを処理する時間を与えない場合は、コールバックが呼び出されるまでに指定した遅延時間以上かかることがあります。
また、先に述べたように、javascriptはシングルスレッドです。そのため、長い間スレッドをブロックしてしまうと
以下のコードのように
while(true) { //infinite loop
}
ページが応答しません**」というメッセージが表示される場合があります。