javascript异步编程_javascript技巧-js-Tutorial-php.cn

Inhaltsverzeichnis

setTimeout (slow, takes about 10 sec)

img.onerror (data:uri)

script.onreadystatechange

script.onload (data:uri)

xhr.onreadystatechange (data:text/plain,foo)

self.postMessage

Heim

Web-Frontend

js-Tutorial

javascript异步编程_javascript技巧

May 16, 2016 pm 06:25 PM

异步编程

就好像排队，前面的人忙着忙着突然上厕所了，后面的人阻塞在这里，因此我们就需要让前面的人死到一边去，让后面的人跟进……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> 
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> 
function async(callback) { 
setTimeout(callback, 0); 
} 
</pre><div class="contentsignin">Nach dem Login kopieren</div></div> 
<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> 
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> 
function async(callback) { 
var img = new Image; 
img.addEventListener('error', callback, false); 
img.src = 'data:,foo'; 
} 
</pre><div class="contentsignin">Nach dem Login kopieren</div></div> 
<p> 
<input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> 
</p> 
</div>

<div class="test"> 
<h3 id="script-onreadystatechange">script.onreadystatechange</h3> 
<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Nach dem Login kopieren</div></div> 
<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> 
<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Nach dem Login kopieren</div></div> 
<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> 
<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Nach dem Login kopieren</div></div> 
<p> 
<input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> 
</p> 
</div>

<div class="test"> 
<h3 id="self-postMessage">self.postMessage</h3> 
<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Nach dem Login kopieren</div></div> 
<p> 
<input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> 
</p> 
</div>

var t = new Date, n = 1000, i = 0, flag = true; 
try { 
test(); 
} catch (e) {} 
setTimeout(function() {if (flag) p.innerHTML = 'failed'; flag = false}, 200);

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn