sleep()的JavaScript版本是什么?

2020/09/14 20:01 · javascript ·  · 0评论

是否有sleep比下面的pausecomp函数(从此处获取更好的方法来设计JavaScript

function pausecomp(millis)
{
    var date = new Date();
    var curDate = null;
    do { curDate = new Date(); }
    while(curDate-date < millis);
}

这不是JavaScriptSleep的重复-动作之间的延迟 ; 我希望在函数中间真正入睡,而不是在执行一段代码之前没有延迟。

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功能帮助编写了此“睡眠”功能:

兼容性

如果您正在使用节点年纪比7(已经达成了一些奇怪的原因生命的尽头),或瞄准旧的浏览器,async/ await仍然可以通过使用巴别塔(一种工具,将transpile的JavaScript +新功能集成到普通的旧的JavaScript) ,带有transform-async-to-generator插件。

(请参阅2016年更新的答案

我认为执行一个动作,等待,然后执行另一个动作是完全合理的。如果您习惯于使用多线程语言编写代码,那么您可能会想到在一段特定的时间内让执行程序唤醒您的线程。

这里的问题是JavaScript是基于事件的单线程模型。虽然在特定情况下,让整个引擎等待几秒钟可能会很好,但是通常这是一种不好的做法。假设我想在编写自己的函数时使用您的函数?当我调用您的方法时,我的方法将全部冻结。如果JavaScript能够以某种方式保留函数的执行上下文,将其存储在某个地方,然后将其带回并稍后继续,则可能会发生睡眠,但这基本上是线程化。

因此,您几乎完全可以遵循别人的建议-您需要将代码分解为多个功能。

那么,您的问题是一个错误的选择。您无法以自己想要的方式入睡,也不应追求您建议的解决方案。

在JavaScript中,我重写了每个函数,以便可以尽快结束。您希望浏览器恢复控制,以便可以更改DOM。

每次我想在函数中间睡觉时,我都会重构为使用setTimeout()

编辑

臭名昭著的睡眠或延迟功能在任何语言中的争论很多。有些人会说应该总是有一个信号或回调来触发给定的功能,另一些人则认为有时任意的延迟时间是有用的。我说,在这个行业中,对每个人来说,一条规则永远不能决定任何事情。

编写睡眠函数非常简单,并且可以在JavaScript Promises中使用:

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

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

仅用于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 !"); }

我同意其他海报,繁忙的睡眠只是一个坏主意。

但是,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)

编辑

这种方法的目的是直到超时后才执行您决定的代码行,同时仍将控制权交还给客户端PC以执行其排队的其他内容。

进一步编辑

正如评论中指出的那样,这绝对不会循环工作。您可以进行一些怪异的(丑陋的)黑客攻击,使其循环运行,但总的来说,这只会造成灾难性的意大利面条式代码。

出于对$ DEITY的热爱,请不要进行繁忙的睡眠功能。 setTimeoutsetInterval做您需要的一切。

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每秒显示和隐藏文本。

我知道这是一个古老的问题,但是如果(像我一样)您在Rhino上使用Javascript,则可以使用...

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.
   */
}

如果您使用的是jQuery,则实际上有人创建了一个“延迟”插件,该插件不过是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');

我也搜索了睡眠解决方案(不是用于生产代码,仅用于开发/测试),并找到了这篇文章:

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

...这是客户端解决方案的另一个链接:http : //www.devcheater.com/

另外,在调用时alert(),代码也会被暂停,同时显示警报-需要找到一种不显示警报而是获得相同效果的方法。:)

干得好。正如代码所言,不要做坏开发者,并在网站上使用它。这是一个开发实用程序功能。

// 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) {}
}

这是使用同步XMLHttpRequest的简单解决方案:

function sleep(n){
  var request = new XMLHttpRequest();
  request.open('GET', '/sleep.php?n=' + n, false);  // `false` makes the request synchronous
  request.send(null);
}

sleep.php的内容:

<?php sleep($_GET['n']);

现在调用它:sleep(5);

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

确保您的调用函数是异步的

经过验证且工作正常

我个人喜欢简单的方法:

function sleep(seconds){
    var waitUntil = new Date().getTime() + seconds*1000;
    while(new Date().getTime() < waitUntil) true;
}

然后:

sleep(2); // Sleeps for 2 seconds

我一直在使用它来在P5js中创建脚本时创建假加载时间

第一:

定义要执行的函数,如下所示:

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

然后使用setTimeout方法安排其执行:

setTimeout(alertWorld,1000)

注意两件事

  • 第二个参数是时间(以毫秒为单位)
  • 作为第一个参数,您只需要传递函数的名称(引用),而不带括号

使事物看起来像大多数人想要的更好的解决方案是使用匿名函数:

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

这可能是您所要做的事情最接近的东西。

请注意,如果您需要多次睡眠,那么这可能会很麻烦,您可能实际上需要重新考虑设计。

使用Atomics.wait更新2019

应该在Node 9.3或更高版本中工作。

我在Node.js中需要一个非常准确的计时器,因此非常有用。但是,似乎浏览器中的支持非常有限。

let ms = 10000;
Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, ms);

跑了10秒计时器基准测试。

使用setTimeout时,我得到的错误最多为7000微秒。(7毫秒)

使用Atomics,我的错误似乎保持在600微秒以下。(0.6毫秒)

2020年更新:摘要

function sleep(millis){ // need help of a server-side page
  let netMillis=Math.max(millis-5,0); //assuming 5ms overhead
  let xhr=new XMLHttpRequest();
  xhr.open('GET','/sleep.jsp?millis='+netMillis+'&rand='+Math.random(), false);
  try{
    xhr.send();
  }catch(e){
  }
}
function sleepAsync(millis){ // use only in async function
  let netMillis=Math.max(millis-1,0); // assuming 1ms overhead
  return new Promise((resolve)=>{
    setTimeout(resolve, netMillis);
  });
}
function sleepSync(millis){ // use only in worker thread, currently Chrome-only
  Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, millis);
}

function sleepTest(){
  console.time('sleep');
  sleep(1000);
  console.timeEnd('sleep');
}
async function sleepAsyncTest(){
  console.time('sleepAsync');
  await sleepAsync(1000);
  console.timeEnd('sleepAsync');
}
function sleepSyncTest(){ 
  let source=`${sleepSync.toString()}
    console.time('sleepSync');
    sleepSync(1000);
    console.timeEnd('sleepSync');`;
  let src='data:text/javascript,'+encodeURIComponent(source);
  console.log(src);
  var worker=new Worker(src);
}

其中一个服务器端页面(例如sleep.jsp)看起来像

<%
try{
  Thread.sleep(Long.parseLong(request.getParameter("millis")));
}catch(InterruptedException e){}
%>

对于浏览器,我同意setTimeout和setInterval是必经之路。

但是对于服务器端代码,它可能需要阻止功能(例如,因此您可以有效地进行线程同步)。

如果使用的是node.js和流星,则可能会遇到在光纤中使用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

这里的大多数答案都是错误的,或者至少是过时的。没有理由让javascript必须是单线程的,实际上不是。如今,所有主流浏览器都支持工作程序,在此之前,其他JavaScript运行时(如Rhino和Node.js)都支持多线程。

“ JavaScript是单线程的”不是有效的答案。例如,在worker中运行sleep函数不会阻止ui线程中运行的任何代码。

在支持生成器和yield的较新运行时中,可以在单线程环境中为sleep函数带来类似的功能:

// This is based on the latest ES6 drafts.
// js 1.7+ (SpiderMonkey/Firefox 2+) syntax is slightly different

// run code you want to sleep here (ommit star if using js 1.7)
function* main(){
    for (var i = 0; i < 10; i++) {
        // to sleep for 10 milliseconds 10 times in a row
        yield 10;
    }

    yield 5;
    console.log('I just slept 5 milliseconds!');
}

// resume the given generator after ms milliseconds
function resume(ms, generator){
    setTimeout(function(){
        // ommit .value if using js 1.7
        var nextSleep = generator.next().value;
        resume(nextSleep, generator);
    }, ms);
}

// initialize generator and get first sleep for recursive function
var
    generator = main(),
    firstSleep = generator.next().value;

// initialize recursive resume function
resume(firstSleep, generator);

模仿睡眠不同于真正的睡眠功能,因为它不会阻塞线程。它只是javascript当前setTimeout函数之上的糖。此功能类型已在Task.js中实现,并且今天应在Firefox中工作。

我将setTimeOut封装在Promise中以实现与其他异步任务的代码一致性:Fiddle中的 Demo

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

这样使用:

sleep(2000).then(function() { 
   // Do something
});

如果您曾经使用Promises,很容易记住语法。

我已经搜索/搜索了很多关于javascript sleep / wait的网页...如果您想让javascript“运行,延迟,运行”,则没有答案。大多数人得到的是“运行,运行(无用)东西”,“运行”或“运行,运行+延迟运行”...。

因此,我吃了一些汉堡,开始思考:::这是一个可行的解决方案...但是您必须将正在运行的代码切碎... :::是的,我知道,这只是一个易于阅读的重构。还是...

// ............................................ // example1:

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

// .................................... // example2:

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

// ................. example3:

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

没有任何依赖关系的最短解决方案:

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

许多答案没有(直接)回答这个问题,这个也没有。

这是我的两个美分(或功能):

如果您不希望比setTimeout笨拙的函数setInterval,可以将它们包装在仅颠倒参数顺序并为其命名的函数中:

function after(ms, fn){ setTimeout(fn, ms); }
function every(ms, fn){ setInterval(fn, ms); }

CoffeeScript版本:

after = (ms, fn)-> setTimeout fn, ms
every = (ms, fn)-> setInterval fn, ms

然后,您可以将它们与匿名函数很好地结合使用:

after(1000, function(){
    console.log("it's been a second");
    after(1000, function(){
        console.log("it's been another second");
    });
});

现在,它很容易读为“ N毫秒后...”(或“每N毫秒...”)

您无法像在JavaScript中那样进行睡眠,或者,您不应这样做。运行睡眠或while循环将导致用户的浏览器挂起,直到循环完成。

使用您所引用的链接中指定的计时器。

您可能需要sleep()函数而不是使用setTimeout()的一种情况是,如果您有一个响应用户单击的函数,该函数最终将最终打开一个新的即弹出窗口,并且您启动了一些需要短时间的处理在显示弹出窗口之前完成。将打开的窗口移到关闭窗口中通常意味着它会被浏览器阻止。

如果您必须处理同步执行,我可以理解睡眠功能的用途。setInterval和setTimeout函数创建一个并行执行线程,该线程将执行顺序返回给主程序,如果您必须等待给定的结果,则该方法无效。当然,可以使用事件和处理程序,但在某些情况下不是想要的。

可以使用Java的sleep方法来完成。我已经在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)

其中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。

对于特定的情况,希望将一组由循环执行的调用隔开,可以将以下代码与原型一起使用。如果没有原型,则可以用setTimeout代替delay函数。

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

加我的两位。我需要等待测试。我不想拆分代码,因为这会花费很多工作,所以对我来说很简单。

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

我认为这样做没有任何弊端,这为我带来了成功。

如果您使用的是node.js,则可以看看光纤 –节点的本机C扩展,一种多线程模拟。

它允许您以sleep阻塞光纤中执行的方式来执行操作,而不会阻塞主线程和其他光纤中的执行。

这是他们自述文件中的一个新示例:

// sleep.js

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');

–结果是:

$ node sleep.js
wait... Fri Jan 21 2011 22:42:04 GMT+0900 (JST)
back in main
ok... Fri Jan 21 2011 22:42:05 GMT+0900 (JST)
本文地址:http://javascript.askforanswer.com/sleepdejavascriptbanbenshishenme.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!