Question

是否有一个函数可以在两行代码之间添加时间延迟。不是settimeout，因为settimeout在其参数中需要一个函数/对象。

我正在寻找像这样的伪代码

write "abc";
delay(500);
write "xyz";

TIA

编辑： jimr在我的另一个thread的解决方案为我的目的而工作，Robusto也是如此。

我只是想知道为什么Robusto和CMS的链接给出的“睡眠”方法不是首选。与settimeout方法有什么不同，因为它们都会在代码中引入暂停？（settimeout在执行函数之前暂停，sleep方法在执行下一行之前暂停。）

Answer 1

以下是笨重和丑陋，我永远不会在我自己的代码中做到这一点，我不会推荐它，但它表明这样的事情是可能的。

// time arg is in milliseconds
function delay(time) {
  var d1 = new Date();
  var d2 = new Date();
  while (d2.valueOf() < d1.valueOf() + time) {
    d2 = new Date();
  }
}

Answer 2

您可以使用setTimeout使代码几乎出现在两行上：

write('abc')
setTimeout(function() {
write('xyz')
},500)

Answer 3

睡眠方法不可用，因为JavaScript执行会阻止浏览器，所以sleep-Method会阻止浏览器500毫秒，你真的想让你的浏览器没有响应半秒吗？

按建议使用setTimeout。

Answer 4

在JavaScript 1.7中，yield与async.js一起使用，您可以执行以下操作：

var yourFunction = _(function () {
    write("abc");
    yield to.sleep(.500);
    write("xyz");
});

Answer 5

我不知道你在这里要做什么，但这里有一个具体原因，为什么自定义睡眠可能不适用于你的目的，假设浏览器冻结对你来说不是问题。

您是否通过这两个写命令之间的任何机会操纵DOM？如果你是，那么它根本不起作用（最终用户认为），虽然DOM节点将在内存中构建/更新，但显示将不会更新，因为该部分不是同步的。处理器被锁定在该循环中，当该循环结束时，两个DOM更新将在屏幕上刷新。请参阅此example。

理想情况下，您应该看到“Hello”，并在5秒后，屏幕上显示“World”。但是，在Chrome，Safari和Firefox上，您会在5秒结束时看到“Hello”和“World”。控制台日志证明DOM节点是在内存中构建的，但是直到最后才能在屏幕上刷新，你可以看到自己。

Answer 6

据我所知，setTimeout()是唯一的方法。

function write(out) {
  alert(out);
}

// ...

write('abc');
setTimeout(function() { write('xyz')}, 500);

Answer 7

我也错过了javascript，因为没有sleep()的java SE和EE爱好者让我对JavaScript感到失望，我做了一个计时器，我希望它对你有用，它使用jQuery，和它非常简单，您可以对其进行反向工程并创建满足您需求的东西：

function timer(object, time) {
  $(object).attr({
    'onclick': ''
  });
  if (time < 0) {
    $(object).attr({
      'onclick': "timer('#clock', 6000);"
    });
    return;
  }
  $(object).animate({
    opacity: 1
  }, 1, function() {
    $(object).empty();
    $(object).append(time + 'ms');
    time--;
    timer(object, time);
  });
}

#clock {
  width: 65px;
  height: 20px;
  border: 1px solid #F00;
  text-align: center;
  line-height: 20px;
  background-color: #000;
  color: #FFF;
  font-weight: 900;
}

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <title>HTML5, CSS3 and JavaScript demo</title>
</head>

<body>
  <div id="clock" onclick="timer('#clock',6000);">--s</div>
</body>

</html>

Answer 8

setInterval(function delay{ //loops every 300 milliseconds
   setTimeout(function firstLineOfCode(){ //waits 100 milliseconds then runs code
      write('abc');
   },100)
   setTimeout(function secondLineOfCode(){ //waits 200 milliseconds (100 after previous line) then runs code
      write('def');
   },200)
   setTimeout(function thirdLineOfCode(){ //waits 300 milliseconds (100 after previous line) then runs code
      write('ghi');
   },300)
},300) //loops after total of delays in function delay()

Answer 9

ES6引入了async/await，它可以用于实际延迟。我已经在另一篇文章中回答了这个问题，在这里也进行了更新

异步函数可以包含await表达式，该表达式会暂停异步函数的执行并等待所传递的Promise的分辨率，然后恢复异步函数的执行并返回解析的值。

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

Answer 10

您可以使用JavaScript中的异步等待概念来添加延迟。

const add2SecondsDelay = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('added 2 seconds delay);
    }, 20000);
  });
}

async function asyncFunctionCall() {

  console.log('abc'); // ------> first step
  const result = await add2SecondsDelay();
  console.log("xyz"); // ------> second step will execute after 2 seconds

}

asyncFunctionCall();

javascript中2行代码之间的时间延迟，而不是settimeout

10 个答案: