Что такое JavaScript-версия sleep ()?

2017 - 2019 обновление

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

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

async function demo() {
  console.log('Taking a break...');
  await sleep(2000);
  console.log('Two seconds later, showing sleep in a loop...');

  // Sleep in loop
  for (let i = 0; i < 5; i++) {
    if (i === 3)
      await sleep(2000);
    console.log(i);
  }
}

demo();

Это оно. await sleep(<duration>),

Или как однострочник:

await new Promise(r => setTimeout(r, 2000));

Обратите внимание, что,

1. awaitможет выполняться только в функциях с префиксом asyncключевого слова или на верхнем уровне вашего сценария в некоторых средах (например, консоль Chrome DevTools или Runkit).
2. awaitтолько приостанавливает текущую asyncфункцию

Две новые функции JavaScript помогли написать эту «спящую» функцию:

• Обещания, родная особенность ES2015 (он же ES6). Мы также используем функции стрелок в определении функции сна.
• Эта async/awaitфункция позволяет коду явно ожидать выполнения обещания (разрешить или отклонить).

Совместимость

• обещания поддерживаются в Node v0.12 + и широко поддерживаются в браузерах , кроме IE
• async/ awaitприземлился в V8 и был включен по умолчанию с Chrome 55 (выпущен в декабре 2016 года)
  • он приземлился в узле 7 в октябре 2016 года
  • а также приземлился в Firefox Nightly в ноябре 2016 года

Если по какой-то странной причине вы используете Node старше 7 лет ( срок действия которого истек ) или нацелены на старые браузеры, то async/ awaitвсе еще можно использовать через Babel (инструмент, который перенесет JavaScript + новые функции в обычный старый JavaScript) , с transform-async-to-generatorплагином.

Ради любви к $ DEITY, пожалуйста, не делайте функцию сна с занятым ожиданием. setTimeoutи setIntervalделай все что нужно.

var showHide = document.getElementById('showHide');
setInterval(() => {
    showHide.style.visibility = "initial";
    setTimeout(() => {
        showHide.style.visibility = "hidden"
    }, 1000);
    ;
}, 2000);   

<div id="showHide">Hello! Goodbye!</div>

Каждые две секунды интервал скрывает текст на одну секунду. Здесь показано, как использовать setInterval и setTimeout для отображения и скрытия текста каждую секунду.

Вы не можете так спать в JavaScript, или, скорее, не должны. Запуск цикла sleep или while приведет к зависанию браузера пользователя до завершения цикла.

Используйте таймер, как указано в ссылке, на которую вы ссылались.

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

Каждый раз, когда я хотел поспать в середине своей функции, я использовал рефакторинг setTimeout().

редактировать

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

Написание функции сна просто и стало еще удобнее с обещаниями JavaScript:

// sleep time expects milliseconds
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

// Usage!
sleep(500).then(() => {
    // Do something after the sleep!
});

Первый:

Определите функцию, которую вы хотите выполнить следующим образом:

function alertWorld(){
  alert("Hello World");
}

Затем запланируйте его выполнение с помощью метода setTimeout:

setTimeout(alertWorld,1000)

Обратите внимание на две вещи

• второй аргумент - время в миллисекундах
• в качестве первого аргумента вы должны передать только имя (ссылку) функции без скобок

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

Я согласен с другими постерами, плохой сон - это просто плохая идея.

Однако setTimeout не задерживает выполнение, он выполняет следующую строку функции сразу после истечения времени ожидания SET, а не после истечения времени ожидания, так что не выполняется та же задача, что и спящий.

Способ сделать это состоит в том, чтобы разбить вашу функцию на части до и после.

function doStuff()
{
  //do some things
  setTimeout(continueExecution, 10000) //wait ten seconds before continuing
}

function continueExecution()
{
   //finish doing things after the pause
}

Убедитесь, что имена ваших функций по-прежнему точно описывают, что делает каждый компонент (IE GatherInputThenWait и CheckInput, а не funcPart1 и funcPart2)

редактировать

Этот метод позволяет не выполнять выбранные вами строки кода до ПОСЛЕ вашего тайм-аута, в то же время возвращая управление обратно клиентскому ПК, чтобы выполнить все, что еще было поставлено в очередь.

Дальнейшее редактирование

Как указано в комментариях, это абсолютно НЕ РАБОТАЕТ в цикле. Вы могли бы сделать какой-нибудь причудливый (уродливый) взлом, чтобы заставить его работать в цикле, но в целом это просто приведет к катастрофическому спагетти-коду.

Если вы используете jQuery, кто-то на самом деле создал плагин «delay», который является не более чем оболочкой для setTimeout:

// Delay Plugin for jQuery
// - http://www.evanbot.com
// - © 2008 Evan Byrne

jQuery.fn.delay = function(time,func){
    this.each(function(){
        setTimeout(func,time);
    });

    return this;
};

Затем вы можете просто использовать его в строке вызовов функций, как и ожидалось:

$('#warning')
.addClass('highlight')
.delay(1000)
.removeClass('highlight');

Я искал / гуглил довольно много веб-страниц на javascript sleep / wait ... и НЕТ ответа, если вы хотите, чтобы javascript "RUN, DELAY, RUN" ... то, что большинство людей получили, было либо "RUN, RUN (бесполезно) прочее), «БЕГ» или «БЕГ, БЕГ + отложенный БЕГ» ....

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

// ......................................... // пример1:

<html>
<body>
<div id="id1">DISPLAY</div>

<script>
//javascript sleep by "therealdealsince1982"; copyrighted 2009
//setInterval
var i = 0;

function run() {
    //pieces of codes to run
    if (i==0){document.getElementById("id1").innerHTML= "<p>code segment "+ i +" is ran</p>"; }
    if (i==1){document.getElementById("id1").innerHTML= "<p>code segment "+ i +" is ran</p>"; }
    if (i==2){document.getElementById("id1").innerHTML= "<p>code segment "+ i +" is ran</p>"; }
    if (i >2){document.getElementById("id1").innerHTML= "<p>code segment "+ i +" is ran</p>"; }
    if (i==5){document.getElementById("id1").innerHTML= "<p>all code segment finished running</p>"; clearInterval(t); } //end interval, stops run
    i++; //segment of code finished running, next...
}

run();
t=setInterval("run()",1000);

</script>
</body>
</html>

// .................................... // пример2:

<html>
<body>
<div id="id1">DISPLAY</div>

<script>
//javascript sleep by "therealdealsince1982"; copyrighted 2009
//setTimeout
var i = 0;

function run() {
    //pieces of codes to run, can use switch statement
    if (i==0){document.getElementById("id1").innerHTML= "<p>code segment "+ i +" ran</p>"; sleep(1000);}
    if (i==1){document.getElementById("id1").innerHTML= "<p>code segment "+ i +" ran</p>"; sleep(2000);}
    if (i==2){document.getElementById("id1").innerHTML= "<p>code segment "+ i +" ran</p>"; sleep(3000);}
    if (i==3){document.getElementById("id1").innerHTML= "<p>code segment "+ i +" ran</p>";} //stops automatically
    i++;
}

function sleep(dur) {t=setTimeout("run()",dur);} //starts flow control again after dur

run(); //starts
</script>
</body>
</html>

// ................. пример3:

<html>
<body>
<div id="id1">DISPLAY</div>

<script>
//javascript sleep by "therealdealsince1982"; copyrighted 2009
//setTimeout
var i = 0;

function flow() {
    run(i);
    i++; //code segment finished running, increment i; can put elsewhere
    sleep(1000);
    if (i==5) {clearTimeout(t);} //stops flow, must be after sleep()
}

function run(segment) {
    //pieces of codes to run, can use switch statement
    if (segment==0){document.getElementById("id1").innerHTML= "<p>code segment "+ segment +" is ran</p>"; }
    if (segment==1){document.getElementById("id1").innerHTML= "<p>code segment "+ segment +" is ran</p>"; }
    if (segment==2){document.getElementById("id1").innerHTML= "<p>code segment "+ segment +" is ran</p>"; }
    if (segment >2){document.getElementById("id1").innerHTML= "<p>code segment "+ segment +" is ran</p>"; }
}

function sleep(dur) {t=setTimeout("flow()",dur);} //starts flow control again after dur

flow(); //starts flow
</script>
</body>
</html>

// .............. example4:

<html>
<body>
<div id="id1">DISPLAY</div>

<script>
//javascript sleep by "therealdealsince1982"; copyrighted 2009
//setTimeout, switch
var i = 0;

function flow() {
    switch(i)
    {
        case 0:
            run(i);
            sleep(1000);
            break;
        case 1:
            run(i);
            sleep(2000);
            break;
        case 5:
            run(i);
            clearTimeout(t); //stops flow
            break;
        default:
            run(i);
            sleep(3000);
            break;
    }
}

function run(segment) {
    //pieces of codes to run, can use switch statement
    if (segment==0){document.getElementById("id1").innerHTML= "<p>code segment "+ segment +" is ran</p>"; }
    if (segment==1){document.getElementById("id1").innerHTML= "<p>code segment "+ segment +" is ran</p>"; }
    if (segment==2){document.getElementById("id1").innerHTML= "<p>code segment "+ segment +" is ran</p>"; }
    if (segment >2){document.getElementById("id1").innerHTML= "<p>code segment "+ segment +" is ran</p>"; }
    i++; //current segment of code finished running, next...
}

function sleep(dur) {t=setTimeout("flow()",dur);} //starts flow control again after dur

flow(); //starts flow control for first time...
</script>
</body>
</html>

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

function itemHandler(item)
{
    alert(item);
}

var itemSet = ['a','b','c'];

// Each call to itemHandler will execute
// 1 second apart
for(var i=0; i<itemSet.length; i++)
{
    var secondsUntilExecution = i;
    itemHandler.delay(secondsUntilExecution, item)
}

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

(См. Обновленный ответ за 2016 год )

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

Проблема здесь заключается в том, что JavaScript является однопоточной моделью, основанной на событиях. Хотя в конкретном случае было бы неплохо подождать всего несколько секунд весь двигатель, в целом это плохая практика. Предположим, я хотел использовать ваши функции при написании своих собственных? Когда я вызывал твой метод, все мои методы зависали. Если JavaScript может каким-то образом сохранить контекст выполнения вашей функции, сохранить его где-нибудь, затем вернуть обратно и продолжить позже, тогда может произойти сон, но это в основном будет потоковым.

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

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

Я также искал решение для сна (не для производственного кода, только для dev / tests) и нашел эту статью:

http://narayanraman.blogspot.com/2005/12/javascript-sleep-or-wait.html

... и вот еще одна ссылка с клиентскими решениями: http://www.devcheater.com/

Кроме того, когда вы звоните alert(), ваш код будет также приостановлен, пока отображается предупреждение - нужно найти способ не отображать предупреждение, но получить тот же эффект. :)

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

Лучшее решение для того, чтобы все выглядело так, как того хочет большинство людей, - это использование анонимной функции:

alert('start');
var a = 'foo';
//lots of code
setTimeout(function(){  //Beginning of code that should run AFTER the timeout
    alert(a);
    //lots more code
},5000);  // put the timeout here

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

Обратите внимание: если вам нужно несколько снов, это может привести к неприятным последствиям, и вам, возможно, придется пересмотреть свой дизайн.

Прежде всего - setTimeout и setInterval - это то, что следует использовать из-за природы callback-ish в javascript. Если вы хотите использовать sleep()неверный поток управления или архитектуру вашего кода.

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

1. притворно синхронно беги с макушки головы

   //a module to do taht //dual-license: MIT or WTF [you can use it anyhow and leave my nickname in a comment if you want to]
   var _=(function(){
    var queue=[];
    var play=function(){
      var go=queue.shift();
        if(go){if(go.a){go.f();play();}else{setTimeout(play,go.t);}}
      }
    return {
      go:function(f){
       queue.push({a:1,f:f});
       },
      sleep:function(t){
       queue.push({a:0,t:t});
       },
      playback:play 
    }
   })();

   [Автоматическое воспроизведение также должно быть возможно]

   //usage
   
   _.go(function(){
   
   //your code
   console.log('first');
   
   });
   
   
   _.sleep(5000);
   
   _.go(function(){
   
   //your code
   console.log('next');
   
   });
   
   //this triggers the simulation
   _.playback();

2. настоящий синхронный пробег

Однажды я много думал об этом, и единственная идея для настоящего сна в javascript - техническая.

функция сна должна быть синхронным вызовом AJAX с таймаутом, установленным в значение сна. Вот и все, и единственный способ получить настоящийsleep()

Если вы хотите перевести анонимную функцию, например, созданную вами в качестве обработчика, я рекомендую следующее:

function()
{
if (!wait_condition)
    {
    setTimeout(arguments.callee, 100, /*comma-separated arguments here*/);
    }
//rest of function
}

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

Я знаю, что это немного старый вопрос, но если (как и я) вы используете Javascript с Rhino, вы можете использовать ...

try
{
  java.lang.Thread.sleep(timeInMilliseconds);
}
catch (e)
{
  /*
   * This will happen if the sleep is woken up - you might want to check
   * if enough time has passed and sleep again if not - depending on how
   * important the sleep time is to you.
   */
}

Код, взятый по этой ссылке , не замораживает комп. Но это работает только на фф.

/**
 * Netscape compatible WaitForDelay function.
 * You can use it as an alternative to Thread.Sleep() in any major programming language
 * that support it while JavaScript it self doesn't have any built-in function to do such a thing.
 * parameters:
 * (Number) delay in millisecond
 */
function nsWaitForDelay(delay) {
    /**
     * Just uncomment this code if you're building an extention for Firefox.
     * Since FF3, we'll have to ask for user permission to execute XPCOM objects.
     */
    netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");

    // Get the current thread.
    var thread = Components.classes["@mozilla.org/thread-manager;1"].getService(Components.interfaces.nsIThreadManager).currentThread;

    // Create an inner property to be used later as a notifier.
    this.delayed = true;

    /* Call JavaScript setTimeout function
      * to execute this.delayed = false
      * after it finish.
      */
    setTimeout("this.delayed = false;", delay);

    /**
     * Keep looping until this.delayed = false
     */
    while (this.delayed) {
        /**
         * This code will not freeze your browser as it's documented in here:
         * https://developer.mozilla.org/en/Code_snippets/Threads#Waiting_for_a_background_task_to_complete
         */
        thread.processNextEvent(true);
    }
}

Метод объекта, который должен использовать «спящий» метод, такой как следующий:

function SomeObject() {
    this.SomeProperty = "xxx";
    return this;
}
SomeObject.prototype.SomeMethod = function () {
    this.DoSomething1(arg1);
    sleep(500);
    this.DoSomething2(arg1);
}

Можно почти перевести на:

function SomeObject() {
    this.SomeProperty = "xxx";
    return this;
}
SomeObject.prototype.SomeMethod = function (arg1) {
    var self = this;
    self.DoSomething1(arg1);
    setTimeout(function () {
        self.DoSomething2(arg1);
    }, 500);
}

Разница в том, что операция SomeMethod возвращается до выполнения операции DoSomething2. Вызывающий "SomeMethod" не может зависеть от этого. Поскольку метод «Sleep» не существует, я использую более поздний метод и соответствующим образом проектирую свой код.

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

Хорошей альтернативой в некоторых ситуациях является отображение панели сообщений верхнего уровня, чтобы остановить взаимодействие с пользователем, а затем скрыть ее снова, когда вы получите ожидаемый результат (асинхронно). Это позволяет браузеру выполнять фоновые задачи, но приостанавливает рабочий процесс, пока вы не вернете свой результат.

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

// Basic sleep function based on ms.
// DO NOT USE ON PUBLIC FACING WEBSITES.
function sleep(ms) {
    var unixtime_ms = new Date().getTime();
    while(new Date().getTime() < unixtime_ms + ms) {}
}

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

for (var i=0;i<1000000;i++){                    
     //waiting
  }

Я не вижу никаких недостатков в этом, и это помогло мне.

Это можно сделать с помощью метода сна Java. Я протестировал его в FF и IE, и он не блокирует компьютер, не проверяет ресурсы и не вызывает бесконечные попадания на сервер. Похоже, чистое решение для меня.

Сначала вы должны загрузить Java на страницу и сделать ее методы доступными. Для этого я сделал это:

<html>
<head>

<script type="text/javascript">

  function load() {
    var appletRef = document.getElementById("app");
    window.java = appletRef.Packages.java;
  } // endfunction

</script>

<body onLoad="load()">

<embed id="app" code="java.applet.Applet" type="application/x-java-applet" MAYSCRIPT="true" width="0" height="0" />

Затем все, что вам нужно сделать, когда вы хотите безболезненную паузу в вашем JS, это:

java.lang.Thread.sleep(xxx)

Где ххх - время в миллисекундах. В моем случае (для обоснования) это было частью выполнения внутреннего заказа в очень маленькой компании, и мне нужно было распечатать счет, который должен был быть загружен с сервера. Я сделал это, загрузив счет (как веб-страницу) в iFrame, а затем распечатал iFrame. Конечно, мне пришлось ждать полной загрузки страницы, прежде чем я смог распечатать, поэтому JS пришлось сделать паузу. Я достиг этого, заставив страницу счета (в iFrame) изменить скрытое поле формы на родительской странице с помощью события onLoad. И код на родительской странице для печати счета-фактуры выглядел следующим образом (несущественные части вырезаны для ясности):

var isReady = eval('document.batchForm.ready');
isReady.value=0;

frames['rpc_frame'].location.href=url;

while (isReady.value==0) {
  java.lang.Thread.sleep(250);
} // endwhile

window.frames['rpc_frame'].focus();
window.frames['rpc_frame'].print();

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

Или просто создайте это:

function yourFunction(){

   //do something
   setInterval(myFunc(),1000);
   //do something else

}

function myFunc(){
   return;
}

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

Для браузеров, я согласен, что setTimeout и setInterval - это путь.

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

Если вы используете node.js и meteor, возможно, вы столкнулись с ограничениями использования setTimeout в волокне. Вот код для сна на стороне сервера.

var Fiber = require('fibers');

function sleep(ms) {
    var fiber = Fiber.current;
    setTimeout(function() {
        fiber.run();
    }, ms);
    Fiber.yield();
}

Fiber(function() {
    console.log('wait... ' + new Date);
    sleep(1000);
    console.log('ok... ' + new Date);
}).run();
console.log('back in main');

Смотрите: https://github.com/laverdet/node-fibers#sleep

Если вы правы функцию сна, как это

var sleep = function(period, decision, callback){
    var interval = setInterval(function(){
        if (decision()) {
            interval = clearInterval(interval);
            callback();
        }
    }, period);
}

и у вас есть асинхронная функция для вызова несколько раз

var xhr = function(url, callback){
    // make ajax request
    // call callback when request fulfills
}

И вы настраиваете свой проект так:

var ready = false;

function xhr1(){
    xhr(url1, function(){ ready = true;});  
}
function xhr2(){
    xhr(url2, function(){ ready = true; }); 
}
function xhr3(){
    xhr(url3, function(){ ready = true; }); 
}

Тогда вы можете сделать это:

xhr1();
sleep(100, function(){ return done; }, xhr2);
sleep(100, function(){ return done; }, xhr3);
sleep(100, function(){ return done; }, function(){
    // do more
});

Вместо бесконечного отступа обратного вызова, подобного этому:

xhr(url1, function(){
    xhr2(url2, function(){
        xhr3(url3, function(){
            // do more
        });
    });
});

Только для debug / dev , я выкладываю это, если это кому-то полезно

Интересные вещи, в Firebug (и, вероятно, других консолях js), ничего не происходит после нажатия enter, только после указанной продолжительности сна (...)

function sleepFor( sleepDuration ){
    var now = new Date().getTime();
    while(new Date().getTime() < now + sleepDuration){ /* do nothing */ } 
}

Пример использования:

function sleepThenAct(){ sleepFor(2000); console.log("hello js sleep !"); }

var waitTillSomethingHappens = function(){  
    if(somethingHappened == 1)  
    {  
        alert('Something Happened get out of sleep');  
    }
    else
    {  
    setTimeout(waitTillSomethingHappens,1000);  
    }  
};

Я использую многопоточный HTML5 Worker, который сможет прервать синхронный запрос XMLHttpRequest, указывающий на не отвечающий URL. Это не блокирует браузер.

https://gist.github.com/el-gringo/6990785