javascript异步编程_javascript技巧-js教程-PHP中文网

setTimeout (slow, takes about 10 sec)

img.onerror (data:uri)

script.onreadystatechange

script.onload (data:uri)

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

self.postMessage

首页

web前端

js教程

javascript异步编程_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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">登录后复制</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">登录后复制</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">登录后复制</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">登录后复制</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">登录后复制</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">登录后复制</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);

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7321

Java教程

1625

CakePHP 教程

1349

Laravel 教程

1261

PHP教程

1209

显示更多

Related knowledge

如何用 C++ 函数实现异步编程？ Apr 27, 2024 pm 09:09 PM

摘要：C++中的异步编程允许多任务处理，无需等待耗时操作。使用函数指针创建指向函数的指针。回调函数在异步操作完成时被调用。boost::asio等库提供异步编程支持。实战案例演示了如何使用函数指针和boost::asio实现异步网络请求。

PHP中如何使用ReactPHP进行异步编程 Jun 27, 2023 am 09:14 AM

随着Web应用程序变得越来越复杂，程序员不得不采用异步编程来处理大量请求和I/O操作。PHP：HypertextPreprocessor也不例外。为了满足这一需求，ReactPHP已经成为目前最受欢迎的PHP异步编程框架之一。在本文中，将讨论如何在PHP中使用ReactPHP进行异步编程。1.ReactPHP简介ReactPHP是一个基于事件驱动编程

JavaScript函数异步编程：处理复杂任务的必备技巧 Nov 18, 2023 am 10:06 AM

JavaScript函数异步编程：处理复杂任务的必备技巧引言：在现代前端开发中，处理复杂任务已经成为了必不可少的一部分。而JavaScript函数异步编程技巧则是解决这些复杂任务的关键。本文将介绍JavaScript函数异步编程的基本概念和常用的实践方法，并提供具体的代码示例，帮助读者更好地理解和使用这些技巧。一、异步编程的基本概念在传统的同步编程中，代码按

如何在PHP中实现异步消息处理 Jul 10, 2023 am 08:19 AM

如何在PHP中实现异步消息处理引言：在现代的Web应用程序中，异步消息处理变得越来越重要。异步消息处理可以提高系统的性能和可扩展性，并改善用户体验。PHP作为一种常用的服务器端编程语言，也可以通过一些技术来实现异步消息处理。在本文中，我们将介绍一些PHP中实现异步消息处理的方法，并提供代码示例。使用消息队列消息队列是一种解耦系统组件的方式，它允许不同的组件在

深入理解PHP8的新特性：如何高效使用异步编程和代码？ Sep 11, 2023 pm 01:52 PM

深入理解PHP8的新特性：如何高效使用异步编程和代码？PHP8是PHP编程语言的最新主要版本，带来了许多令人兴奋的新特性和改进。其中最突出的特性之一是对异步编程的支持。异步编程允许我们在处理并发任务时提高性能和响应能力。本文将深入探讨PHP8的异步编程特性，并介绍如何高效地使用它们。首先，让我们了解一下什么是异步编程。在传统的同步编程模型中，代码按照线性的顺

Java框架异步编程中的常见问题与解决方案 Jun 04, 2024 pm 05:09 PM

Java框架异步编程中常见的3个问题和解决方案：回调地狱：使用Promise或CompletableFuture以更直观的风格管理回调。资源竞争：使用同步原语（如锁）保护共享资源，并考虑使用线程安全集合（如ConcurrentHashMap）。未处理异常：明确处理任务中的异常，并使用异常处理框架（如CompletableFuture.exceptionally()）处理异常。