javascript asynchronous programming_javascript skills

就好像排队，前面的人忙着忙着突然上厕所了，后面的人阻塞在这里，因此我们就需要让前面的人死到一边去，让后面的人跟进……AJAX就是这个概念，请求还在继续，但我们还可以做其他事。

javascript中实现这个功能的是来自BOM的一个函数setTimeout，但相关的DOM操作也提供了一系列实现。如XMLHttpRequest对象与script标签的onreadystatechange回调，image的onload与onerror回调，iframe的onload，DOM元素的事件回调，HTML5的跨域消息传送postMessage，QuickTime与flash对象的加载……

setTimeout的零秒延迟在前些年时间被国内宣扬得特别厉害，但setTimeout是所有延迟中最慢的，最少要花上10多毫秒，如果用setTimeout来开发特效，这特效会运行得比较慢。下面是一个性能测试：

<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> <div class="test"> <h3 id="setTimeout-slow-takes-about-sec">setTimeout (slow, takes about 10 sec)</h3> <pre class='brush:php;toolbar:false;'> function async(callback) { setTimeout(callback, 0); } </pre> <p> <input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> </p> </div> <div class="test"> <h3 id="img-onerror-data-uri">img.onerror (data:uri)</h3> <pre class='brush:php;toolbar:false;'> 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> </div> <div class="test"> <h3 id="script-onreadystatechange">script.onreadystatechange</h3> <pre class='brush:php;toolbar:false;'> 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> </div> <div class="test"> <h3 id="script-onload-data-uri">script.onload (data:uri)</h3> <pre class='brush:php;toolbar:false;'> 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> </div> <div class="test"> <h3 id="xhr-onreadystatechange-data-text-plain-foo">xhr.onreadystatechange (data:text/plain,foo)</h3> <pre class='brush:php;toolbar:false;'> 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> </div> <div class="test"> <h3 id="self-postMessage">self.postMessage</h3> <pre class='brush:php;toolbar:false;'> 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 + "//" + location.host); } async.count = 0; </pre> <p> <input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> </p> </div> <script> function runtest(div) { var pre = div.getElementsByTagName('pre')[0]; eval(pre.textContent || pre.innerText); // load async function var p = div.getElementsByTagName('p')[0]; var t = new Date, n = 1000, i = 0, flag = true; try { test(); } catch (e) {} setTimeout(function() {if (flag) p.innerHTML = 'failed'; flag = false}, 200); function test() { if (i++ < n) { async(test); if (flag && i == 2) { p.innerHTML = 'running'; flag = false; } } else { p.innerHTML = "Average delay was " + (new Date - t)/n + "ms, over " + n + " iterations."; } } } </script>