JavaScriptで時間遅延を設定する方法

私のウェブサイトには画像を切り替えるためのjsがありますが、もう一度画像をクリックすると遅延が発生します。遅延は1000msである必要があります。したがって、img.jpgをクリックすると、img_onclick.jpgが表示されます。次にimg_onclick.jpg画像をクリックすると、img.jpgが再び表示されるまでに1000ミリ秒の遅延が生じるはずです。

これがコードです：

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：この質問を参照してください。

setTimeout(function(){


}, 500); 

コードを { }

500 = 0.5秒

2200 = 2.2秒

等

ES-6ソリューション

以下はaync / awaitを使用して実際の遅延を発生させるサンプルコードです。

多くの制約があり、これは役に立たないかもしれませんが、楽しみのためにここに投稿するだけです。

    async function delay(delayInms) {
      return new Promise(resolve  => {
        setTimeout(() => {
          resolve(2);
        }, delayInms);
      });
    }
    async function sample() {
      console.log('a');
      console.log('waiting...')
      let delayres = await delay(3000);
      console.log('b');
    }
    sample();

javascript setTimeoutとsetInterval（other）には2種類の（主に使用される）タイマー関数があります。

これらのメソッドは両方とも同じ署名を持っています。これらは、コールバック関数と遅延時間をパラメーターとして受け取ります。

setTimeout遅延後に一度だけ実行さsetIntervalれますが、遅延ミリ秒ごとにコールバック関数を呼び出し続けます。

これらのメソッドは両方とも、タイマーが期限切れになる前にそれらをクリアするために使用できる整数の識別子を返します。

clearTimeoutそしてclearIntervalこれらの両方の方法は、上記の関数から返される整数の識別子を取るsetTimeoutとsetInterval

例：

setTimeout

alert("before setTimeout");

setTimeout(function(){
        alert("I am setTimeout");
   },1000); //delay is in milliseconds 

  alert("after setTimeout");

上記のコードを実行すると、警告が表示さbefore setTimeoutれ、after setTimeout最後I am setTimeoutに1秒（1000ミリ秒）後に警告が表示されます。

この例からわかるのsetTimeout(...)は、非同期であることです。つまり、次のステートメントに進む前にタイマーが経過するのを待機しません。alert("after setTimeout");

例：

setInterval

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最終的I am setInterval に1秒（1000ミリ秒）後に5回アラートが表示されます。これは、setTimeoutが5秒後にタイマーをクリアするか、1秒ごとにアラートが発生するためです。I am setInterval。

どのようにブラウザは内部的にそれをしますか？

簡単に説明します。

JavaScriptでイベントキューについて知る必要があることを理解するには。ブラウザに実装されたイベントキューがあります。イベントがjsでトリガーされると、これらのイベント（クリックなど）がすべてこのキューに追加されます。ブラウザーで実行するものがない場合は、キューからイベントを受け取り、それらを1つずつ実行します。

今、あなたが呼び出すとき setTimeoutやsetIntervalコールバックがブラウザのタイマーに登録され、指定された時間が経過するとイベントキューに追加され、最終的にJavaScriptがキューからイベントを取得して実行します。

これは、JavaScriptエンジンがシングルスレッドであり、一度に1つしか実行できないためです。そのため、他のJavaScriptを実行したり、タイマーを追跡したりすることはできません。そのため、これらのタイマーはブラウザーに登録され（ブラウザーはシングルスレッドではありません）、タイマーを追跡し、タイマーの期限が切れた後にキューにイベントを追加できます。

setIntervalこの場合にのみ同じことが起こります。イベントがキューに追加されるのは、指定された間隔の後、イベントがクリアされるかブラウザのページが更新されるまでです。

注意

これらの関数に渡す遅延パラメーターは、コールバックを実行するための最小遅延時間です。これは、タイマーの期限が切れると、ブラウザがJavaScriptエンジンによって実行されるイベントをキューに追加しますが、コールバックの実行は、キュー内のイベントの位置に依存し、エンジンがシングルスレッドであるため、すべてのイベントを実行するためですキューを1つずつ。

したがって、他のコードがスレッドをブロックし、キューにあるものを処理する時間を与えない場合、コールバックは指定された遅延時間よりも特別に呼び出されるのに時間がかかることがあります。

そして私が言及したように、javascriptはシングルスレッドです。したがって、スレッドを長時間ブロックした場合。

このコードのように

while(true) { //infinite loop 
}

ユーザーには、ページが応答しないというメッセージが表示される場合があります。

同期呼び出しの場合、以下の方法を使用できます。

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

更新が必要な場合、これは別の可能性です。

setTimeout(function () { 
    $("#jsSegurosProductos").jsGrid("refresh"); 
}, 1000);

この問題を解決するために私がやっていることは次のとおりです。これはタイミングの問題が原因であり、コードを実行するために一時停止が必要であったことに同意します。

var delayInMilliseconds = 1000; 
setTimeout(function() {
 //add your code here to execute
 }, delayInMilliseconds);

この新しいコードは1秒間一時停止し、その間コードを実行します。

私が何をしているかを理解するのに役立つので、私は私の入力を与えます。

3秒待機する自動スクロールスライドショーを作成するには、次のようにしました。

var isPlaying = true;

function autoPlay(playing){
   var delayTime = 3000;
   var timeIncrement = 3000;

   if(playing){
        for(var i=0; i<6; i++){//I have 6 images
            setTimeout(nextImage, delayTime);
            delayTime += timeIncrement;
        }
        isPlaying = false;

   }else{
       alert("auto play off");
   }
}

autoPlay(isPlaying);

このようにsetTimeout（）を実行するときは、すべてのタイムアウト関数は、setTimeout（nextImage、delayTime）;遅延時間が静的な3000ミリ秒であると想定して、同時に実行されるかのように実行されます。

これを説明するために行ったのは、forループの各増分の後に3000ミリ秒/秒を追加することでした。 delayTime += timeIncrement;。

ここを気にする人のために、私のnextImage（）は次のようになります。

function nextImage(){
    if(currentImg === 1){//change to img 2
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[1].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[1];
        imgDescription.innerHTML = imgDescText[1];

        currentImg = 2;
    }
    else if(currentImg === 2){//change to img 3
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[2].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[2];
        imgDescription.innerHTML = imgDescText[2];

        currentImg = 3;
    }
    else if(currentImg === 3){//change to img 4
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[3].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[3];
        imgDescription.innerHTML = imgDescText[3];

        currentImg = 4;
    }
    else if(currentImg === 4){//change to img 5
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[4].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[4];
        imgDescription.innerHTML = imgDescText[4];

        currentImg = 5;
    }
    else if(currentImg === 5){//change to img 6
    for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[5].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[5];
        imgDescription.innerHTML = imgDescText[5];

        currentImg = 6;
    }
    else if(currentImg === 6){//change to img 1
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[0].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[0];
        imgDescription.innerHTML = imgDescText[0];

        currentImg = 1;
    }
}