javascript異步編程

2024-05-06 12:37:06

字體：大中小

供稿：網(wǎng)友

就好像排隊(duì)，前面的人忙著忙著突然上廁所了，后面的人阻塞在這里，因此我們就需要讓前面的人死到一邊去，讓后面的人跟進(jìn)……AJAX就是這個(gè)概念，請(qǐng)求還在繼續(xù)，但我們還可以做其他事。

javascript中實(shí)現(xiàn)這個(gè)功能的是來(lái)自BOM的一個(gè)函數(shù)setTimeout，但相關(guān)的DOM操作也提供了一系列實(shí)現(xiàn)。如XMLHttpRequest對(duì)象與script標(biāo)簽的onreadystatechange回調(diào)，image的onload與onerror回調(diào)，iframe的onload，DOM元素的事件回調(diào)，HTML5的跨域消息傳送postMessage，QuickTime與flash對(duì)象的加載……

setTimeout的零秒延遲在前些年時(shí)間被國(guó)內(nèi)宣揚(yáng)得特別厲害，但setTimeout是所有延遲中最慢的，最少要花上10多毫秒，如果用setTimeout來(lái)開發(fā)特效，這特效會(huì)運(yùn)行得比較慢。下面是一個(gè)性能測(cè)試：

<!doctype html> <html lang="en"> <head> <title>Async performance test</title> <meta charset="gb2312"> <style> pre { background-color: #eeeeee; padding: 20px; } div.test { margin: 20px; padding: 10px; border: solid black 1px; } </style> </head> <body>  <h3>setTimeout (slow, takes about 10 sec)</h3> <pre class="source"> function async(callback) { setTimeout(callback, 0); } </pre> <p> <input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> </p>   <h3>img.onerror (data:uri)</h3> <pre class="source"> function async(callback) { var img = new Image; img.addEventListener('error', callback, false); img.src = 'data:,foo'; } </pre> <p> <input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> </p>   <h3>script.onreadystatechange</h3> <pre class="source"> function async(callback) { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "javascript:"; script.onreadystatechange = function () { document.body.removeChild(script); callback(); } document.body.appendChild(script); } </pre> <p> <input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> </p>   <h3>script.onload (data:uri)</h3> <pre class="source"> function async(callback) { var script = document.createElement('script'); script.onload = function() { document.body.removeChild(script); callback(); } script.src = 'data:text/javascript,'; document.body.appendChild(script); } </pre> <p> <input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> </p>   <h3>xhr.onreadystatechange (data:text/plain,foo)</h3> <pre class="source"> function async(callback) { var xhr = new XMLHttpRequest; xhr.open('GET','data:text/plain,foo',true); xhr.onreadystatechange = function() { xhr.onreadystatechange = null; callback(); }; xhr.send(null); } </pre> <p> <input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> </p>   <h3>self.postMessage</h3> <pre class="source"> function async(callback) { var n = ++async.count; window.addEventListener('message',function(e){ if (e.data == n) { window.removeEventListener('message', arguments.callee,false); callback(); } },false); window.postMessage(n, location.protocol + "http://" + location.host); } async.count = 0;             </SPAN>
</div>
</div>
<div   id="70qarhlowxag"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="70qarhlowxag"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/05-06/1043332.html'>javascript createAdder函數(shù)功能與使用說(shuō)明</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/05-06/1043334.html'>javascript 全等號(hào)運(yùn)算符使用說(shuō)明</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="70qarhlowxag"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒(méi)什么話要說(shuō)嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學(xué)習(xí)交流