Поставил задержку на JavaScript

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

6 54
javascript

6 ответов:

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

это не так сложно использовать на самом деле, вместо того, чтобы писать это:

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;
    }
  }
}

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

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

116

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

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

код, который я получил:

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

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

вот что мы хотим закодировать:

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

вот как мы должны сказать это JAVASCRIPT:

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

надеюсь, что это помогает.

11

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

3

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

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

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

2

Если вы в порядке с ES6, ждите хорошо:

const DEF_DELAY = 1000;

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

await sleep(100);
0

используйте функцию 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

-8