Как установить временную задержку в 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(...) является асинхронным, что означает, что он не ждет истечения таймера, прежде чем перейти к следующему оператору i.e alert("after 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 наконец он предупреждает 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 milli / s после каждого для инкрементирования цикла через 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;
    }
}