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服务端开发中的应用。一、什么是异步编程模式异步编程模式是指程序的执行不是按照程序的顺序

Spring Boot与Kotlin协程的整合和异步编程Jun 22, 2023 pm 06:22 PM

随着现代Web应用的复杂性不断增加，尤其是在分布式系统和微服务等领域，异步编程已经成为了新的标配。SpringBoot是用于构建基于Spring框架的快速Web应用程序的工具，而Kotlin协程是一种基于协程的异步编程方式。在本文中，我们将讨论如何将它们整合起来，实现更高效的异步编程。Kotlin协程简介Kotlin语言是一种静态类型的编程语言，从1.3版

See all articles