1. 什么是宏任务和微任务JavaScript 把异步任务又做了进一步的划分,异步任务又分为两类,分别是:① 宏任务(macrotask): 宿主环境提供的异步方法都是宏任务script全部代码异步 Ajax 请求setTimeout、setInterval文件操作DOM事件I/OUIrendering② 微任务(microtask):语言标准提供PromiseAsync / AwaitmutationObserverProcess.nextTick(Node独有)2. Event Loop 和DOM渲染console.log('script start'); setTimeout(() => { console.log('setTimeout'); }, 0); new Promise((resolve) => { console.log('promise1'); resolve(); }); const div = document.createElement('div') div.innerHTML = '<h1>hello<
我们写代码的时候,通常希望代码能按照我们写的顺序来执行;例如:async function add(x) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(x + x); }, 1000); }); } !(async function () { let arr = [5, 6, 7]; arr.forEach(async (item) => { console.log(await add(item)); }); })()我们更希望上边的输出9结果为按顺序依次等待1秒后输出,但是,真实情况是 一起等待了1秒后一次性输出了。1.for-ofasync function add(x) { return new Promise((resolve, reject) => { setTimeout(() => { re
async/await 是ES7 (ECMAscript 2016)提出的基于Promise的解决异步回调的最终方案;使用同步语法编写异步代码,彻底消灭回调函数;async / await是基于Promise实现的,不能用于普通的回调函数;async / await 并不能改变异步的本质( js是单线程的,异步需要回调,都是要基于 event loop 来实现);await 后面的代码,都可以看做是异步回调 callback 里的内容,都是异步的;async / await 和Promise不互斥,两者相辅相成。1.基本使用方法async关键字: 放在函数声明之前,表明该函数是一个异步函数。该异步函数会返回一个Promise对象,当函数执行完毕的时候,我们可以像使用Promise一样进行调用then方法处理后续流程。async function getAsync() { return 'ASYNC DATA'; } const a1 = getAsync(); // Promise a1.then(function (value) { console.log(valu
ES6(ECMAScript 2015) 原生提供了 Promise 对象。 Promise 是异步编程的一种解决方法,比传统的回调函数和事件更合理更强大,Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。// Promise 新建后立即执行,所以首先输出的是Promise。然后,then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行,所以resolved最后输出。 let promise = new Promise(function (resolve, reject) { console.log('Promise'); // Promise resolve(); }); promise.then(function () { console.log('resolved.'); // resolved. }); console.log('Hi!'); // Promise // Hi! // resolved.1.Promise 的三种状态funct
class JQuery { constructor(selector) { const dom = document.querySelectorAll(selector); for (let i = 0; i < dom.length; i++) { this[i] = dom[i]; } this.length = dom.length; this.selector = selector; } each(fn) { for (let i = 0; i < this.length; i++) { fn(this[i], i); } } get(index) { return this[index]; } on(eventName, fn) { this.each(function (item) { ite
Gonwe
心同流水净,身与白云轻