Как установить временную задержку в javascript

setTimeout(function(){


}, 500); 

поместите свой код внутри { }

500 = 0.5 секунд

2200 = 2.2 секунды

etc.

есть два (в основном используемых) типа функции таймера в javascript setTimeout и setInterval (другое)

оба эти метода имеют одинаковую сигнатуру. Они принимают функцию обратного вызова и время задержки в качестве параметра.

setTimeout выполняется только один раз после задержки, тогда как setInterval держит на вызове функции обратного вызова после каждой задержки milisecs.

оба эти метода возвращают целочисленный идентификатор, который можно использовать для их очистки до таймер истекает.

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 5 раз через 1 сек (1000 мс), потому что setTimeout очистить таймер через 5 секунд или иначе каждые 1 секунду вы получите предупреждение I am setInterval бесконечно.

как браузер внутренне это делает?

я объясню вкратце.

чтобы понять, что вы должны знать о очереди событий в javascript. В браузере реализована очередь событий. Всякий раз, когда событие запускается в js, все это события (например, щелчок и т. д.. ) добавляются в эту очередь. Когда вашему браузеру нечего выполнять, он берет событие из очереди и выполняет их один за другим.

теперь, когда вы называете setTimeout или setInterval ваш обратный вызов регистрируется на таймер в браузере, и он добавляется в очередь событий после истечения заданного времени, и в конечном итоге javascript берет событие из очереди и выполняет его.

это происходит так, потому что движок javascript однопоточный и они может выполнять только одну вещь за раз. Таким образом, они не могут выполнять другие javascript и отслеживать ваш таймер. Именно поэтому эти таймеры регистрируются в браузере (браузер не является однопоточным), и он может отслеживать таймер и добавлять событие в очередь после истечения таймера.

то же самое происходит для setInterval только в этом случае событие добавляется в очередь снова и снова после указанного интервала, пока оно не будет очищено или обновлена страница браузера.

Примечание

параметр задержки, который вы передаете этим функциям, является минимальной задержкой время для выполнения обратного вызова. Это потому, что после истечения таймера браузер добавляет событие в очередь, которая должна быть выполнена javascript engine но выполнение обратного вызова зависит от вашего события позиционируются в очереди и так как движок однопоточный он выполнит все события в очереди по одному.

отсюда, ваш обратный вызов может иногда занять больше указанного времени задержки, чтобы быть вызванным специально, когда ваш другой код блокирует поток и не дает ему времени для обработки того, что есть в очереди.

и как я уже упоминал JavaScript-это один поток. Так что, если вы блокируете поток надолго.

такой код

while(true) { //infinite loop 
}

ваш пользователь может получить сообщение с надписью страница не отвечает.

Ниже приведен пример кода, который использует 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();

вот что я делаю, чтобы решить эту проблему. Я согласен, что это из-за проблемы времени и нужна пауза для выполнения кода.

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

этот новый код приостановит его на 1 секунду, а тем временем Запустите свой код.

Если вам нужно обновить, это еще одна возможность:

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

Я дам свой вклад, потому что это помогает мне понять, что я делаю.

чтобы сделать слайд-шоу с автоматической прокруткой, которое имеет 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 миллисекунд.

что я сделал, чтобы объяснить это было добавить дополнительные 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;
    }
}