blocks|key|1007663|text|你可以使用setTimeout，这样代码看起来就像是在两行上运行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1007664|write('abc')
setTimeout(function()+{
write('xyz')
},500)|code-block|syntax|javascript|1007665|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can use setTimeout so that it almost appears the code runs on two lines:</p>

<pre><code>write('abc')
setTimeout(function() {
write('xyz')
},500)
</code></pre>


blocks|key|1007598|text|休眠方法不可用，因为JavaScript执行会阻止浏览器，所以休眠方法会阻止浏览器500毫秒，您真的希望浏览器在半秒内不响应吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1007599|按照建议使用setTimeout。|1007600|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>A sleep-Method is not available because JavaScript execution blocks the browser, so a sleep-Method would block the browser for 500msec, do you really want to have your browser not responding for half an second?</p>

<p>Use setTimeout as suggested.</p>


blocks|key|1007803|text|在JavaScript+1.7中，结合使用yield和async.js，您可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1007804|var+yourFunction+=+_(function+()+{
++++write("abc");
++++yield+to.sleep(.500);
++++write("xyz");
});|code-block|syntax|javascript|1007805|entityMap|0|LINK|mutability|MUTABLE|url|http://eligrey.com/blog/post/pausing-javascript-with-async-js^0|L|5|R|8|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>In JavaScript 1.7, using <code>yield</code> with <a href="http://eligrey.com/blog/post/pausing-javascript-with-async-js" rel="noreferrer">async.js</a>, you can do the following:</p>

<pre><code>var yourFunction = _(function () {
    write("abc");
    yield to.sleep(.500);
    write("xyz");
});
</code></pre>


blocks|key|1007762|text|我不知道你想在这里做什么，但这里有一个具体的原因，为什么自定义睡眠可能不会为你的目的工作，假设浏览器死机对你来说不是问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1007763|您是否在这两个write命令之间碰巧操作了DOM？如果是这样，那么它就不会工作(最终用户认为)，尽管DOM节点将在内存中构造/更新，但显示将不会更新，因为该部分不是同步的。处理器被锁定在该循环中，当该循环结束时，两个DOM更新都将在屏幕上刷新。请参阅此example。|offset|length|1007764|理想情况下，你应该在屏幕上看到"Hello"，5秒后会看到"World“。然而，在Chrome、Safari和Firefox上，你会在5秒后同时看到"Hello“和"World”。控制台日志证明DOM节点是在内存中构造的，但是直到最后才会在屏幕上刷新，正如您可以看到自己一样。|1007765|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/QPc6j/1/^0|0|3I|7|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

<p>I don't know what you're trying to do here, but here's one concrete reason for why a custom sleep may not work for your purposes assuming the browser freezing up is a non-issue for you.</p>

<p>Are you manipulating the DOM by any chance between those two write commands? If you are, then it simply will not work (as perceived by an end user), although the DOM nodes will be constructed/updated in memory, the display will not get updated as that part is not synchronous. The processor is locked up in that loop, and both the DOM updates will refresh on screen when that loop finishes. See this <a href="http://jsfiddle.net/QPc6j/1/" rel="nofollow noreferrer">example</a>.</p>

<p>Ideally, you should see "Hello", and after 5 seconds, "World" on the screen. However, on Chrome, Safari, and Firefox, you would see both "Hello" and "World" at the end of 5 seconds. The console logs prove that the DOM node is constructed in memory, but is not refreshed on screen until the end as you can see yourself.</p>


blocks|key|1221911|text|据我所知，setTimeout()是唯一的方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1221912|function+write(out)+{
++alert(out);
}

//+...

write('abc');
setTimeout(function()+{+write('xyz')},+500);|code-block|syntax|javascript|1221913|entityMap^0|5|C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>As far as I know, <code>setTimeout()</code> is the only way to do it.</p>

<pre><code>function write(out) {
  alert(out);
}

// ...

write('abc');
setTimeout(function() { write('xyz')}, 500);
</code></pre>


blocks|key|1222304|text|我也很怀念JavaScript上的这一点，作为一个java+SE和EE爱好者，没有我的sleep()让我对javascript感到失望，我做了一个计时器，我希望它能对你有用，它使用jQuery，而且它相当简单，你可以反向工程它并创建满足你需求的东西：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1222305|​|1222306|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+%2B+'ms');
++++time--;
++++timer(object,+time);
++});
}|code-block|syntax|javascript|1222307|#clock+{
++width:+65px;
++height:+20px;
++border:+1px+solid+#F00;
++text-align:+center;
++line-height:+20px;
++background-color:+#000;
++color:+#FFF;
++font-weight:+900;
}|1222308|<!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>|1222309|1222310|entityMap^0|17|7|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|Q|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|S|$]]

<p>I miss that on javascript too, as a java SE and EE enthusiast not having my <code>sleep()</code> makes me disappointed with JavaScript, I made a timer and I hope it can be useful to you, it uses jQuery, and it's fairly simple, you can reverse engineer it and create something that meet your needs:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function timer(object, time) {
  $(object).attr({
    'onclick': ''
  });
  if (time &lt; 0) {
    $(object).attr({
      'onclick': "timer('#clock', 6000);"
    });
    return;
  }
  $(object).animate({
    opacity: 1
  }, 1, function() {
    $(object).empty();
    $(object).append(time + 'ms');
    time--;
    timer(object, time);
  });
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#clock {
  width: 65px;
  height: 20px;
  border: 1px solid #F00;
  text-align: center;
  line-height: 20px;
  background-color: #000;
  color: #FFF;
  font-weight: 900;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  &lt;title&gt;HTML5, CSS3 and JavaScript demo&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div id="clock" onclick="timer('#clock',6000);"&gt;--s&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1007946|text|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()|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1007947|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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()
</code></pre>


blocks|key|1222395|text|您可以使用JavaScript中的异步等待概念添加延迟。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1222396|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();|code-block|syntax|javascript|1222397|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can add delay using async await concept in JavaScript.</p>

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

async function asyncFunctionCall() {

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

}

asyncFunctionCall();
</code></pre>


<p>is there a function that would add a time delay between 2 lines of code.  Not the settimeout, because settimeout requires a function/object in its arguments.</p>

<p>I am looking for something like this pseudo code</p>

<pre><code>write "abc";
delay(500);
write "xyz";
</code></pre>

<p>TIA</p>

<p>Edit:
jimr's solution in my other  <a href="https://stackoverflow.com/questions/3048005/document-onclick-settimeout-function-javascript-help">thread</a> worked for my purpose, and so is Robusto's.  </p>

<p>I am just wondering why the "sleep" methods given by Robusto and CMS's link are not preferred. How would that be different than the settimeout method since they both  introduce a pause in the code? (settimeout pauses before the function is executed, the sleep method pauses before the next line is executed.)</p>


time delay between 2 lines of code in javascript, not settimeout

jQuery

HTML5

有没有一个函数可以在两行代码之间添加一个时间延迟。不是settimeout，因为settimeout的参数中需要一个函数/对象。我正在寻找像这样的伪代码write "abc";delay(500);write "xyz";提亚编辑:jimr在我的另一个中的解决方案符合我的目的，Robusto的也是如此。我只是想知道为什么Robusto和CMS的链接给出的“睡眠”方法不是首选的。这与settimeo

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

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript中两行代码之间的时间延迟，而不是settimeoutEN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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