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

首页

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> 
<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>

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

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

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

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

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

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

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

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

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

如何使用PHP和ReactPHP实现异步编程May 11, 2023 pm 02:00 PM

随着互联网应用场景的不断发展，人们对Web应用的要求也越来越高。为了提高Web应用的性能和响应速度，异步编程已经成为现代Web应用开发不可或缺的一部分。PHP是一门广泛使用的Web开发语言，而ReactPHP则是一个基于PHP的异步编程框架。本篇文章将介绍如何使用PHP和ReactPHP实现异步编程。一、什么是异步编程？在编程中，同步和异步是两种常用的编程方

如何在Go语言中实现异步编程Jun 04, 2023 am 08:10 AM

随着互联网技术的不断发展，高并发高可用的需求越来越强烈。而异步编程是提高程序运行效率和响应能力的有效手段之一。Go语言作为一种新兴的编程语言，天生支持并发和异步编程，极大地方便了程序员的开发工作。本文将介绍如何在Go语言中实现异步编程。一、Go语言中的goroutineGo语言提供了goroutine机制，可以轻松地实现并发和异步操作。goroutine是一

前往Golang学习之Web服务端的异步编程模式Jun 24, 2023 am 10:52 AM

随着互联网技术的快速发展，Web服务端的开发成为了当前互联网行业的热门话题。而Golang作为一门新兴的编程语言，凭借其高效、并发的特性，也成为了Web服务端开发的首选语言之一。本文将会介绍GolangWeb服务端的异步编程模式，旨在帮助读者更好地掌握Golang在Web服务端开发中的应用。一、什么是异步编程模式异步编程模式是指程序的执行不是按照程序的顺序

探究Swoole异步编程中的IO信号处理Jun 13, 2023 pm 05:54 PM

Swoole是一个很流行的基于PHP语言实现的高性能网络通信框架，它提供了诸如异步IO、多进程、协程等功能，极大的提升了基于PHP语言开发网络应用程序的效率和性能。其中，IO信号处理是Swoole异步编程中的一个非常关键的部分，本文就来探究一下Swoole异步编程中的IO信号处理。一、IO信号处理的概念在日常工作中，我们经常需要监听来自各种设备或系统的输入输

See all articles