javascript異步編程

2024-05-06 12:37:06

字體：大中小

來源：轉載

供稿：網友

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

javascript中實現這個功能的是來自BOM的一個函數setTimeout，但相關的DOM操作也提供了一系列實現。如XMLHttpRequest對象與script標簽的onreadystatechange回調，image的onload與onerror回調，iframe的onload，DOM元素的事件回調，HTML5的跨域消息傳送postMessage，QuickTime與flash對象的加載……

setTimeout的零秒延遲在前些年時間被國內宣揚得特別厲害，但setTimeout是所有延遲中最慢的，最少要花上10多毫秒，如果用setTimeout來開發特效，這特效會運行得比較慢。下面是一個性能測試：

<!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="iwvjtn8m0"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="iwvjtn8m0"   class="fenxiang">

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

</div>

<div   id="iwvjtn8m0"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  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">

學習交流