脚本宝典收集整理的这篇文章主要介绍了

setTimeout和setInterval

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>作为<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>本身十分重要的2个异步执行函数,初学者感觉这个很不好理解,我简单写一写我的理解</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="setTimeout (func, millisec); setInterval(func, millisec);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lisp"><code><a href="http://www.js-code.com/tag/setTimeout" title="浏览关于“setTimeout”的文章" target="_blank" class="tag_link">setTimeout</a> (<span class="hljs-name">func</span>, millisec)<span class="hljs-comment">;</span> <a href="http://www.js-code.com/tag/setInterval" title="浏览关于“setInterval”的文章" target="_blank" class="tag_link">setInterval</a>(<span class="hljs-name">func</span>, millisec)<span class="hljs-comment">;</span></code></pre> <p>这两个方法在形式看起来很相似,第一个参数是异步执行的函数(用字符串表示的代码也可以,不过很少这样用),第二个参数是时间(ms)。但其实这两个函数还是有很大区别的</p> <p>说的通俗一点,<code><a href="http://www.js-code.com/tag/setTimeout" title="setTimeout" target="_blank">setTimeout</a>()</code>让电脑一定时间以后再执行一段代码,执行完了就拉倒,例如下面这段代码:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="setTimeout(&quot;alert('5 seconds!')&quot;, 5000); //5秒后弹出提示框 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript" style="word-break: break-word; white-space: initial;">setTimeout(<span class="hljs-string">"<a href="http://www.js-code.com/tag/alert" title="浏览关于“alert”的文章" target="_blank" class="tag_link">alert</a>('5 seconds!')"</span>, <span class="hljs-number">5000</span>); <span class="hljs-comment">//5秒后弹出提示框 </span></code></pre> <p>再看看<code><a href="http://www.js-code.com/tag/setInterval" title="setInterval" target="_blank">setInterval</a>()</code>,不同的在于每过一段时间会重复执行一段代码。比如在浏览器中输出一个时间,每一秒变化一下。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var clk = document.getElementById(&quot;clk&quot;); //clk是一个div setInterval(function(){ var t = new Date(); clk.innerHTML= t; }, 200); //每隔200ms显示一次时间,200ms会看着比1000ms更稳定一些" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> clk = <span class="hljs-built_in"><a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a></span>.getElementById(<span class="hljs-string">"clk"</span>); <span class="hljs-comment">//clk是一个<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> setInterval(<span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-keyword">var</span> t = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> <span class="hljs-built_in"><a href="http://www.js-code.com/tag/Date" title="浏览关于“Date”的文章" target="_blank" class="tag_link">Date</a></span>(); clk.<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>ner<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a>= t; }, <span class="hljs-number">200</span>); <span class="hljs-comment">//每隔200ms显示一次时间,200ms会看着比1000ms更稳定一些</span></code></pre> <p>运行上面这个代码,如果你得到的时间不准确,那一定是你的电脑时间错了。<br />好了,总结一下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="setTimeout(func, m); //m毫秒后执行函数func,只执行一次(下文会讲怎么让它中止) setInterval(func, m); //每隔m毫秒执行函数func,一直执行下去(下文会讲怎么让它停下来)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">setTimeout(func, m); <span class="hljs-comment">//m毫秒后执行函数func,只执行一次(下文会讲怎么让它中止)</span> setInterval(func, m); <span class="hljs-comment">//每隔m毫秒执行函数func,一直执行下去(下文会讲怎么让它停下来)</span></code></pre> <p>对于<code><a href="http://www.js-code.com/tag/setInterval" title="setInterval" target="_blank">setInterval</a>()</code>的用途可能还比较好理解,但是对于<code><a href="http://www.js-code.com/tag/setTimeout" title="setTimeout" target="_blank">setTimeout</a>()</code>,这里有一个问题——我们为什么要让一段代码过一段时间在执行?</p> <p>这里就产生了一个很重要的概念,在本文一开始就提到过——异步!什么是异步?<br />举个通俗一点的例子:比如现在有烧水和擦桌子两件事,如果你一定要用热水擦桌子,那你就必须先等着水开了,才能擦桌子,这个就是同步;如果你不在乎用什么水擦桌子,那一般人都会先烧水,在烧水的同时就开始擦桌子了,这个就是异步。</p> <p>对于计算机而言,这个逻辑和正常生活不一样:同时执行就是异步,先后执行就是同步!当然这是一种简单的理解,并不严谨,毕竟在计算机内部计时器脉冲、操作系统进程、网络通信中都有同步和异步的概念。</p> <p>有了异步执行这个概念,那小编可以负责的说<code>setTimeout()</code>和<code>setInterval()</code>都是异步执行的。其实2015年出的ES6在异步这里下了很大的功夫,提出了<code>async <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>(){}</code>、<code><a href="http://www.js-code.com/tag/promis" title="Promis" target="_blank">Promis</a>e</code>对象、<code><a href="http://www.js-code.com/tag/generator" title="Generator" target="_blank">Generator</a></code>函数、<a href="http://www.js-code.com/tag/Object" title="Object" target="_blank">Object</a>.observe函数等很多新概念,不过这里不谈这些概念,但理解这些异步概念绝不能像这篇文章里面简单粗暴!!!</p> <p>好了现在可以回答上面那个问题了,我们之所以会用到<code>setTimeout()</code>和<code>setInterval()</code>更多还是为了异步执行代码,以此提高代码的执行速度。到此这两个方法的就讲完了。。。等等!!!方法?方法会不会有返回值呀!<br />没错,这两个函数都有返回值,至于这个值是个什么并不重要,我们只需要知道这个值能干什么,我们给上面的那段代码添点东西:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var clk = document.getElementById(&quot;clk&quot;); //clk是一个div var time = setInterval(function(){ var t = new Date() clk.innerHTML= t; }, 200); var btn = document.getElementById(&quot;btn&quot;); //btn是一个按钮 btn.onclick = function(){ clearInterval(time); };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">var</span> clk = <span class="hljs-built_in"><a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>cument</span>.getElementById(<span class="hljs-string">"clk"</span>); <span class="hljs-comment">//clk是一个div</span> <span class="hljs-keyword">var</span> time = setInterval(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-keyword">var</span> t = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>() clk.innerHTML= t; }, <span class="hljs-number">200</span>); <span class="hljs-keyword">var</span> btn = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"btn"</span>); <span class="hljs-comment">//btn是一个按钮</span> btn.<a href="http://www.js-code.com/tag/onclick" title="浏览关于“onclick”的文章" target="_blank" class="tag_link">onclick</a> = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <a href="http://www.js-code.com/tag/clearInterval" title="浏览关于“clearInterval”的文章" target="_blank" class="tag_link">clearInterval</a>(time); };</code></pre> <p>这段代码我们获得了<code>setInterval() </code>的返回值,把返回值传给了<code><a href="http://www.js-code.com/tag/clearInterval" title="clearInterval" target="_blank">clearInterval</a>()</code>方法,这样实现了点击按钮结束的对应setInterval()的反复调用,终于它可以停下来了。</p> <p>同样的方法,利用<code><a href="http://www.js-code.com/tag/clearTimeout" title="clearTimeout" target="_blank">clearTimeout</a>()</code> 方法可取消由 <code>setTimeout()</code> 函数定义的异步操作,我们如法炮制得到一个取消延迟事件的按钮(当然,如果这个事件已经执行了再点这个按钮就没意义了):</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var alt = setTimeout(&quot;alert('5 seconds!')&quot;, 5000); //5秒后弹出提示框 var btn = document.getElementById(&quot;btn&quot;); //btn是一个按钮 btn.onclick = function(){ clearTimeout(alt); };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">var</span> alt = setTimeout(<span class="hljs-string">"alert('5 seconds!')"</span>, <span class="hljs-number">5000</span>); <span class="hljs-comment">//5秒后弹出提示框</span> <span class="hljs-keyword">var</span> btn = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"btn"</span>); <span class="hljs-comment">//btn是一个按钮</span> btn.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <a href="http://www.js-code.com/tag/clearTimeout" title="浏览关于“clearTimeout”的文章" target="_blank" class="tag_link">clearTimeout</a>(alt); };</code></pre> <p>如果用<code>setInterval</code>和<code>setTimeout</code>调用的函数是一个有参数的函数怎么办?</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="function f(a, b){/*...*/} var num = 2; setTimeout(&quot;f(num, 3)&quot;, 1000); //第一种方法 setTimeout(function(){fun(num, 3);}, 1000); //第二种方法" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">f</span>(<span class="hljs-params">a, b</span>)</span>{<span class="hljs-comment">/*...*/</span>} <span class="hljs-keyword">var</span> num = <span class="hljs-number">2</span>; setTimeout(<span class="hljs-string">"f(num, 3)"</span>, <span class="hljs-number">1000</span>); <span class="hljs-comment">//第一种方法</span> setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{fun(num, <span class="hljs-number">3</span>);}, <span class="hljs-number">1000</span>); <span class="hljs-comment">//第二种方法</span></code></pre> <p>这一下,<code>setTimeout()</code>和<code>setInterval()</code>已经理解了,看它们相似点其实也不少,否则怎么会容易被搞混呢?其实我们可以使用<code>setTimeout()</code>实现<code>setInterval()</code>的功能,就像下面一段代码:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> mySetInterval(code, ms){<br /> <a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>(<a href="http://www.js-code.com/tag/typeof" title="typeof" target="_blank">typeof</a> code === &quot;str<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>g&quot;) //不要忘了第一个参数可以是字符串<br /> <a href="http://www.js-code.com/tag/eval" title="eval" target="_blank">eval</a>(code);<br /> <a href="http://www.js-code.com/tag/else" title="else" target="_blank">else</a> <a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>(<a href="http://www.js-code.com/tag/typeof" title="typeof" target="_blank">typeof</a> code === &quot;<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>&quot;)<br /> code();<br /> <a href="http://www.js-code.com/tag/else" title="else" target="_blank">else</a> <a href="http://www.js-code.com/tag/throw" title="throw" target="_blank">throw</a> <a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> Error(&quot;code cannot be run&quot;); //当第一个参数传入不是字符串或函数时报错<br /> setTimeout(<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>(){<br /> mySetInterval(code, ms); //递归调用<br /> },ms);<br /> }<br /> mySetInterval(&quot;<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>cument.write('helloWorld!<br ></span>')&quot;, 1000);//调用方法不变,第一个参数也可以是函数" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">mySetInterval</span>(<span class="hljs-params">code, ms</span>)</span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span>(<span class="hljs-keyword"><a href="http://www.js-code.com/tag/typeof" title="浏览关于“typeof”的文章" target="_blank" class="tag_link">typeof</a></span> code === <span class="hljs-string">"string"</span>) <span class="hljs-comment">//不要忘了第一个参数可以是字符串</span> <span class="hljs-built_in"><a href="http://www.js-code.com/tag/eval" title="浏览关于“eval”的文章" target="_blank" class="tag_link">eval</a></span>(code); <span class="hljs-keyword"><a href="http://www.js-code.com/tag/else" title="浏览关于“else”的文章" target="_blank" class="tag_link">else</a></span> <span class="hljs-keyword">if</span>(<span class="hljs-keyword">typeof</span> code === <span class="hljs-string">"function"</span>) code(); <span class="hljs-keyword">else</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/throw" title="浏览关于“throw”的文章" target="_blank" class="tag_link">throw</a></span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">"code cannot be run"</span>); <span class="hljs-comment">//当第一个参数传入不是字符串或函数时报错</span> setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ mySetInterval(code, ms); <span class="hljs-comment">//递归调用</span> },ms); } mySetInterval(<span class="hljs-string">"document.write('helloWorld!&lt;br /&gt;')"</span>, <span class="hljs-number">1000</span>);<span class="hljs-comment">//调用方法不变,第一个参数也可以是函数</span></code></pre> <p>这里值得强调的是<strong><a href="http://www.js-code.com/tag/eval" title="eval" target="_blank">eval</a>()并不是什么好东西</strong>,它在全局运行,对字符串并不能有效检查(会让JSL<a href="http://www.js-code.com/tag/int" title="int" target="_blank">int</a>失效),还会调用编译器降低效率,同时带来安全隐患。所以尽量不要用<a href="http://www.js-code.com/tag/eval" title="eval" target="_blank">eval</a>(),也不要给<code>setTimeout</code>和<code>setInterval</code>传入字符串,因为系统也是用<a href="http://www.js-code.com/tag/eval" title="eval" target="_blank">eval</a>实现这个功能的。<br />这段代码只是用这样一种方式表示<code>setTimeout()</code>和<code>setInterval()</code>的关系,便于读者理解。并不表示这样做有什么好,更不表示编译器也这么实现<code>setInterval()</code>,因为这样的递归效率不高占用资源却不少,而且它没法停止。</p> <p>如果你已经掌握了上面的内容,那么下面可以更深入的理解一下异步了。</p> <p>以setTimeout为例:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//alert(1); //setTimeout(&quot;alert(2)&quot;, 0); //alert(3); //alert(3);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">//alert(1);</span> <span class="hljs-comment">//setTimeout("alert(2)", 0);</span> <span class="hljs-comment">//alert(3);</span> <span class="hljs-comment">//alert(3);</span></code></pre> <p>上面这段代码会如何输出呢?实际输出是:<code>1 -&gt; 3 -&gt; 3 -&gt;2</code>,为什么会这样,难道<code>setTimeout(func, 0)</code>不是立即执行?没错。想理解这个问题,必须简单理解浏览器是如何处理异步函数的。</p> <p>一个页面在浏览器显示出来至少需要3个线程,分别是js引擎,GUI渲染,事件触发。其中事件触发是独立于其他2个执行的,而js和GUI是相互排斥的,也就是说同一个时间二者只有一个在工作。好了,这说明js引擎是单线程执行的,当第二行的<code>setTimeout</code>执行以后,js引擎把func(第一个参数)放入异步队列(浏览器再开一个线程),然后继续向下执行,此后,当js引擎空闲下来才会把异步执行的结果插入原来js线程中。是不是这样呢,我们让代码说话:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" var finish = true; setTimeout(function(){ finish = false; //1s后,改变isEnd的值 }, 0); while(finish); alert('finished'); //永远不会执行" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code> <span class="hljs-keyword">var</span> finish = <span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span>; setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ finish = <span class="hljs-literal"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span>; <span class="hljs-comment">//1s后,改变isEnd的值</span> }, <span class="hljs-number">0</span>); <span class="hljs-keyword"><a href="http://www.js-code.com/tag/while" title="浏览关于“while”的文章" target="_blank" class="tag_link">while</a></span>(finish); alert(<span class="hljs-string">'finished'</span>); <span class="hljs-comment">//永远不会执行</span></code></pre> <p>上方这段代码是个死循环,就因为js引擎不能空闲下来,异步函数也就没有执行。下面这个实际问题可以很好的理解这个:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!DOCTYPE html><br /> <html><br /> <head><br /> <meta charset=&quot;utf-8&quot; /><br /> <title></title><br /> </head></p> <style> </style> <p><body><br /> <button id='firstBtn'>first</button></p> <div id='firstHint'>click 'first' <a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a> to calculate.</div> <p> <button id='secondBtn'>second</button></p> <div id='secondHint'>click 'second' button to calculate.</div> <p></body><br /> <script> function calc(s) { <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> result = 0; <a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a> (<a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> i = 0; i < 1000000000; i++) { result = result + i; } //<a href="http://www.js-code.com/tag/debugger" title="debugger" target="_blank">debugger</a>; <a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>.querySelector(s).<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>ner<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> = 'Done' ; }</p> <p> <a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>cument.querySelector('#firstBtn').<a href="http://www.js-code.com/tag/onclick" title="onclick" target="_blank">onclick</a> = function () { <a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>.querySelector('#firstH<a href="http://www.js-code.com/tag/int" title="int" target="_blank">int</a>').inner<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> = 'calculating....'; calc('#firstH<a href="http://www.js-code.com/tag/int" title="浏览关于“int”的文章" target="_blank" class="tag_link">int</a>'); };</p> <p> document.querySelector('#secondBtn').<a href="http://www.js-code.com/tag/onclick" title="onclick" target="_blank">onclick</a> = function () { document.querySelector('#secondHint').innerHTML = 'calculating....'; setTimeout(function(){ calc('#secondHint'); }, 0); }; </script><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/char" title="浏览关于“char”的文章" target="_blank" class="tag_link">char</a>set</span>=<span class="hljs-string">"utf-8"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'firstBtn'</span>&gt;</span>first<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'firstHint'</span>&gt;</span>click 'first' button to calculate.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">br</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'secondBtn'</span>&gt;</span>second<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'secondHint'</span>&gt;</span>click 'second' button to calculate.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">calc</span>(<span class="hljs-params">s</span>) </span>{ <span class="hljs-keyword">var</span> result = <span class="hljs-number">0</span>; <span class="hljs-keyword"><a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a></span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; <span class="hljs-number">1000000000</span>; i++) { result = result + i; } <span class="hljs-comment">//<a href="http://www.js-code.com/tag/debugger" title="浏览关于“debugger”的文章" target="_blank" class="tag_link">debugger</a>;</span> <span class="hljs-built_in">document</span>.querySelector(s).innerHTML = <span class="hljs-string">'Done'</span> ; } <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'#firstBtn'</span>).onclick = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'#firstHint'</span>).innerHTML = <span class="hljs-string">'calculating....'</span>; calc(<span class="hljs-string">'#firstHint'</span>); }; <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'#secondBtn'</span>).onclick = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'#secondHint'</span>).innerHTML = <span class="hljs-string">'calculating....'</span>; setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ calc(<span class="hljs-string">'#secondHint'</span>); }, <span class="hljs-number">0</span>); }; </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p>我们用了一很大的循环模拟一个耗费时间的计算。</p> <p>分析一下:第一个按钮看不到calculating。由于js引擎的事件处理也是异步的,而<a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a>循环是同步的,设置文字为calculating的语句被放在了for循环结束,因为只有此时js才有空闲处理异步队列,for结束了以后,文字被设置为calculating,继而变为Done,所以我们看不到这个过程了,在代码中<code><a href="http://www.js-code.com/tag/debugger" title="debugger" target="_blank">debugger</a></code>的位置停一下,这个过程就清晰的呈现了出来。</p> <p>为了解决这个问题,第二个按钮引入了<code>setTimeout</code>这样,异步事件click执行,函数内第一个语句被送入队列,而后<code>setTimeout</code>里那个匿名函数被送入队列,此时js引擎有空闲,于是输出calculating,异步队列移动,继续执行calc,这样就是我们想看到的结果了。</p> <p>不足之处请多指点。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

setTimeout和setInterval

全部内容,希望文章能够帮你解决

setTimeout和setInterval

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过