JavaScript Thread.Sleep()
<h1 class="grid--cell fs-headline1 fl1 ow-break-word">What is the JavaScript version of sleep()?</h1><p>需要注意的是，这里必须await才会等待</p>
<p>Since 2009 when this question was asked, JavaScript has evolved significantly. All other answers are now obsolete or overly complicated. Here is the current best practice:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> sleep(ms) {
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">new</span> Promise(resolve =><span style="color: rgba(0, 0, 0, 1)"> setTimeout(resolve, ms));
}
async </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> demo() {
console.log(</span>'Taking a break...'<span style="color: rgba(0, 0, 0, 1)">);
await sleep(</span>2000<span style="color: rgba(0, 0, 0, 1)">);
console.log(</span>'Two seconds later, showing sleep in a loop...'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Sleep in loop</span>
<span style="color: rgba(0, 0, 255, 1)">for</span> (let i = 0; i < 5; i++<span style="color: rgba(0, 0, 0, 1)">) {
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (i === 3<span style="color: rgba(0, 0, 0, 1)">)
await sleep(</span>2000<span style="color: rgba(0, 0, 0, 1)">);
console.log(i);
}
}
demo();</span></pre>
</div>
<h3>This is it. <code>await sleep(<duration>)</code>.</h3>
<p>Note that,</p>
<ol>
<li><code>await</code> can only be executed in functions prefixed with the <code>async</code> keyword, or at the top level of your script in some environments (e.g. the Chrome DevTools console, or Runkit).</li>
<li><code>await</code> only pauses the current <code>async</code> function</li>
</ol>
<p>Two new JavaScript features helped write this "sleep" function:</p>
<ul>
<li>Promises, a native feature of ES2015 (aka ES6). We also use arrow functions in the definition of the sleep function.</li>
<li>The <code>async/await</code> feature lets the code explicitly wait for a promise to settle (resolve or reject).</li>
</ul>
<h2>Compatibility</h2>
<ul>
<li>promises are supported in Node v0.12+ and widely supported in browsers, except IE</li>
<li><code>async</code>/<code>await</code> landed in V8 and has been enabled by default since Chrome 55 (released in Dec 2016)
<ul>
<li>it landed in Node 7 in October 2016</li>
<li>and also landed in Firefox Nightly in November 2016</li>
</ul>
</li>
</ul>
<p>If for some weird reason you're using Node older than 7 (which has reached end of life), or are targeting old browsers, <code>async</code>/<code>await</code> can still be used via Babel (a tool that will transpile JavaScript + new features into plain old JavaScript), with the <code>transform-async-to-generator</code> plugin.</p>
<p> </p>
<h1>What's the equivalent of Java's Thread.sleep() in JavaScript? </h1>
<div class="post-text">
<p>The simple answer is that there is no such function.</p>
<p>The closest thing you have is:</p>
<pre class="lang-java prettyprint prettyprinted highlighter-hljs"><code>var millisecondsToWait = 500;
setTimeout(function() {
// Whatever you want to do after the wait
}, millisecondsToWait);</code></pre>
<p>Note that you <em>especially</em> don't want to busy-wait (e.g. in a spin loop), since your browser is almost certainly executing your JavaScript in a single-threaded environment.</p>
<p>Here are a couple of other SO questions that deal with threads in JavaScript:</p>
<ul>
<li>JavaScript and Threads</li>
<li>Why doesn't JavaScript support multithreading?</li>
</ul>
<p>And this question may also be helpful:</p>
<ul>
<li>setTimeout - how to avoid using string for callback?</li>
</ul>
</div>
<p> </p>
<h1 class="grid--cell fs-headline1 fl1 ow-break-word">How to wait 5 seconds with jQuery?</h1>
<div class="post-text">
<p>Built in javascript setTimeout.</p>
<pre class="default prettyprint prettyprinted highlighter-hljs"><code>setTimeout(
function()
{
//do something special
}, 5000);</code></pre>
<p><em>UPDATE</em>: you want to wait since when the page has finished loading, so put that code inside your <code>$(document).ready(...);</code> script.</p>
<p><em>UPDATE 2</em>: jquery 1.4.0 introduced the <code>.delay</code> method. Check it out. Note that .delay only works with the jQuery effects queues.</p>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/chucklu/p/11177148.html
頁:
[1]