`
darrenzhu
  • 浏览: 782230 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JavaScript的事件处理函数是同步执行的, 不是异步

阅读更多

特别提出一点, 触发事件并执行事件处理函数是一个同步过程,不是异步过程. 所以事件机制并不是异步的.如果你对这句话,有疑问, 请自行编写代码验证,以前我总认为事件机制异步的, 但不是, 如下所示,

function testSynchronousEventHandler() {
	var event1 = new CustomEvent("event1", {
		detail : {
			message : "event1 handler",
			time : new Date(),
		},
		bubbles : true,
		cancelable : true
	}), event2 = new CustomEvent("event2", {
		detail : {
			message : "event2 handler",
			time : new Date(),
		},
		bubbles : true,
		cancelable : true
	});

	this.addEventListener("event1", function(e) {
		console.log(e.detail.message);
	}, false);

	this.addEventListener("event2", function(e) {
		console.log(e.detail.message);
	}, false);

	this.dispatchEvent(event1);
	console.log('after event1')
	this.dispatchEvent(event2);
	console.log('after event2')
}


上面的代码在chrome里面的(IE9以下不支持customer event)执行结果是:
event1 handerl
after event1
event2 handler
after event2

绝对不会是: after event1 出现在event1 handler 前面, 因为事件触发是一个同步过程,不是触发了,先执行后面的代码,再执行事件处理函数里面的代码, Ajax的callback函数执行是异步的,那是因为需要与服务器打交道,所以js会先执行后面的代码,等ajax结果返回时,再执行callback函数里面的代码, 但是事件触发机制本身不是异步的.
0
0
分享到:
评论

相关推荐

    【JavaScript源代码】Javascript中异步等待的深入理解.docx

     async/await 是javascript中的一种模式,可使您的代码以同步方式执行,但又不影响javascript的异步行为。 要定义一个异步函数,您所要做的只是在函数定义之前添加一个async关键字。 // async function always ...

    深入理解JavaScript编程中的同步与异步机制

    JavaScript的优势之一是其如何处理异步代码。异步代码会被放入一个事件队列,等到所有其他代码执行后才进行,而不会阻塞线程。然而,对于初学者来说,书写异步代码可能会比较困难。而在这篇文章里,我将会消除你可能...

    javascript 回调函数详解

    回调函数定义 回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递...因此callback 不一定用于异步,一般同步(阻塞)的场景下也经常用到回调,比如要求执行某些操作后执行回调函数。 例子

    由回调函数、Promise到async/await的同步写法执行异步代码

    由回调函数、Promise到async/await的同步写法执行异步代码 同步异步是前端面试中经常遇到的问题,虽然不难,但是搞清楚两者之间的关系和转换还是很重要 同步 同步是一种线性执行的方式,执行的流程不能跨越,其后的...

    微信小程序中使用Promise进行异步流程处理的实例详解

    我们知道,JavaScript是单进程执行的,同步操作会对程序的执行进行阻塞处理。比如在浏览器页面程序中,如果一段同步的代码需要执行很长时间(比如一个很大的循环操作),则页面会产生卡死的现象。 所以,在...

    浅析JavaScript回调函数应用

    一、回调函数定义 回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给...因此callback 不一定用于异步,一般同步(阻塞)的场景下也经常用到回调,比如要求执行某些操作后执行回调函数。

    JS异步处理的进化史深入讲解

    前言 javascript是一门单线程的语言,也就是说一次只能完成一件任务,如果有多个任务,就需要排队进行处理。...目前,在javascript异步处理中,有以下几种方式: callback 回调函数是最早解决异步编

    JavaScript王者归来part.1 总数2

     6.1.1.2 JavaScript函数的奥妙——魔法代码   6.1.2 函数的调用   6.2 函数的参数   6.2.1 形参与实参   6.2.2 Arguments对象   6.2.2.1 一个使用Arguments对象检测形参的例子   6.2.2.2 一个使用...

    JavaScript 异步调用

    问题 可修改下面的 aa() 函数,目的是在一抄后用 console.log() 输出 want-value ...问题的主要目的是考察对异步调用执行结果的处理,既然是异步调用,那么 不可能同步等待异步结果,结果一定是异步的 setTimeout

    理解javascript异步编程

    所谓异步执行,不同于同步执行(程序的执行顺序与任务的排列顺序是一致的、同步的),每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前...

    基于javascript的异步编程实例详解

    JavaScript程序员如果称一个函数为异步的,其意思就是这个函数会导致将来再运行另一个函数,后者取自于事件队列。如果后面这个函数是作为参数传递给前者的,则称其为回调函数。 callback 回调函数是异步编程最基本的...

    简单了解JavaScript异步

    JavaScript异步都是通过回调形式完成的,开发过程中一直在处理回调,可能不知不觉中自己就已经处在回调地狱中。 浏览器线程 在开始之前简单的说一下浏览器的线程,对浏览器的作业有个基础的认识。之前说过...

    浅谈js的异步执行

    为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous)。 2.”异步模式”编程的几种方法: (1)回调函数:优点是简单、容易理解和部署,缺点是不利于代码的阅读和...

    Javascript实现异步编程的过程

    相信不少人对Javascript单线程表示...但是并不是每个任务都会立刻执行,而这种不立刻执行的任务我们称作异步任务。相反,那些立刻执行的任务我们把它们称作同步任务。而这些异步任务都会交给浏览器的其他线程去执行,但

    space-agency:在 JavaScript 中处理异步任务组的示例

    航天局这个 repo 包含许多同步和异步的例子,以及 JavaScript 中的顺序和并发执行。 特别是,这些示例旨在说明编排多个异步任务的不同策略,而不仅仅是孤立的一个。 :information: 如果你还不熟悉 JavaScript 中的...

    JavaScript 异步调用框架 (Part 1 – 问题 场景)

    如果它是纯客户端的同步函数,那么签名会是这样的: function divide(operand1, operand2) 然而假设我们对客户端除法的精度不满意,于是把除法转移到服务器端来执行,那么它是个需要调用XHR的异步函数,签名也就可能...

    javascript异步编程的4种方法

    你可能知道,Javascript语言的执行环境是”单线程”(single thread)。所谓”单线程”,就是指一次只能完成一件...为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchr

    javascript 函数的暂停和恢复实例详解

    此时,async-await 横空出世,它让我们可以用同步的方式编写异步代码,简直 amazing,以至于有人说它就是 javascript 异步编程的银弹。 P.S.代码只是演示,并不可用 function getProfile(id) { return win

    JavaScript中实现异步编程模式的4种方法

    你可能知道,Javascript语言的执行环境是”单线程“(single thread)。 所谓”单线程”,就是指一次只能完成一件任务。...为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asy

    study-notes:学习笔记

    1、JavaScript ECMAScript 新特性 JavaScript vs. ECMAScript 块级作用域、模板字符串 对象与数组的解构、rest 操作符 ... 处理异步任务的任务队列和事件循环 JavaScript 内部的宏任务与微任务 ES 6 Genera

Global site tag (gtag.js) - Google Analytics