Положите задержку в Javascript

Мне нужно добавить задержку около 100 миллисекунд к моему Javascript-коду, но я не хочу использовать функцию setTimeout объекта window, и я не хочу использовать цикл занятости. У кого-нибудь есть предложения?

Ответ 1

К сожалению, setTimeout() является единственным надежным способом (а не единственным способом, но единственным надежным способом), чтобы приостановить выполнение script без блокировки пользовательский интерфейс.

Это не так сложно использовать, а не писать:

var x = 1;

// Place mysterious code that blocks the thread for 100 ms.

x = x * 3 + 2;
var y = x / 2;

вы используете setTimeout(), чтобы переписать его следующим образом:

var x = 1;
var y = null; // To keep under proper scope

setTimeout(function() {
    x = x * 3 + 2;
    y = x / 2;
}, 100);

Я понимаю, что использование setTimeout() включает в себя больше мысли, чем желательная функция sleep(), но, к сожалению, более поздняя версия не существует. Многие способы решения этой проблемы пытаются реализовать такие функции. Некоторые используют циклы занятости:

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

others используя XMLHttpRequest, связанный с сервером script, который спит в течение некоторого времени, прежде чем возвращать результат.

К сожалению, это временные решения и могут вызвать другие проблемы (например, замораживание браузеров). Рекомендуется просто придерживаться рекомендуемого способа, который setTimeout()).

Ответ 2

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

Через Ajax, a script получает сообщения X (0-10). Что я хотел сделать: Добавьте одно сообщение в DOM каждые 10 секунд.

код, в котором я закончил:

$.each(messages, function(idx, el){
  window.setTimeout(function(){
    doSomething(el);
  },Math.floor(idx+1)*10000);
});

В принципе, подумайте о тайм-аутах как "временной шкале" вашего script.

Это то, что мы хотим записать:

DoSomething();
WaitAndDoNothing(5000);
DoSomethingOther();
WaitAndDoNothing(5000);
DoEvenMore();

Это КАК НУЖНО СКАЗАТЬ ЭТО В JAVASCRIPT:

At Runtime 0    : DoSomething();
At Runtime 5000 : DoSomethingOther();
At Runtime 10000: DoEvenMore();

Надеюсь, что это поможет.

Ответ 3

Если с ES2017 у вас все в порядке, await хорошо:

const DEF_DELAY = 1000;

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms || DEF_DELAY));
}

await sleep(100);

Обратите внимание, что часть await должна быть в асинхронной функции:

//IIAFE (immediately invoked async function expression)
(async()=>{
  //Do some stuff
  await sleep(100);
  //Do some more stuff
})()

Ответ 4

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

Ответ 5

Этот поток имеет хорошее обсуждение и полезное решение:

function pause( iMilliseconds )
{
    var sDialogScript = 'window.setTimeout( function () { window.close(); }, ' + iMilliseconds + ');';
    window.showModalDialog('javascript:document.writeln ("<script>' + sDialogScript + '<' + '/script>")');
}

К сожалению, похоже, что это не работает в некоторых версиях IE, но в потоке есть много других достойных предложений, если это окажется для вас проблемой.

Ответ 6

Используйте функцию AJAX, которая будет вызывать php-страницу синхронно, а затем на этой странице вы можете поместить функцию php usleep(), которая будет действовать как задержка.

function delay(t){

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.open("POST","http://www.hklabs.org/files/delay.php?time="+t,false);

//This will call the page named delay.php and the response will be sent to a division with ID as "response"

xmlhttp.send();

document.getElementById("response").innerHTML=xmlhttp.responseText;

}

http://www.hklabs.org/articles/put-delay-in-javascript