山东大学移动信息门户09

2021SC@SDUSC

通用异步含义

• 异步解决的场景：

  • 阻塞：web应用执行过多代码没有返回控制给浏览器，以至于浏览器似乎被冻结了。

• js是单线程的

• 出现worker thread，但其不能使用DOM并且基本上是同步的；

---

js中的异步

旧版的回调式：

const btn = document.querySelector('button');
​
btn.addEventListener('click', () => {
  alert('You clicked me!');
​
  let pElem = document.createElement('p');
  pElem.textContent = 'This is a newly-added paragraph.';
  document.body.appendChild(pElem);
});

新版的Promise式：

fetch('products.json').then(function(response) {
  return response.json();
}).then(function(json) {
  products = json;
  initialize();
}).catch(function(err) {
  console.log('Fetch problem: ' + err.message);
});

• .then()上次op成功后执行，每个.then()又返回一个promise，以此可以实现同步；

• .catch()上次op失败后执行；

事件队列：

异步op放入事件队列中，等待主线程已处理完成再开始运行。

---

协作式异步：超时和间隔

setTimeout( function, time, ... )

• 经指定时间后执行指定代码块

• 此处的time是最小执行时间：直到栈空，回调函数才能被执行！

• ...：function需要的参数，顺次放入...中

function sayHi(who) {
  alert(`Hello ${who}!`);
}
​
let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');
​
//使用clearTimeout()提前调用setTimeout()中的函数
clearTimeout(myGreeting);

setInterval()

• 在每次调用执行前进行指定时间延迟

function displayTime() {
   let date = new Date();
   let time = date.toLocaleTimeString();
   document.getElementById('demo').textContent = time;
}
​
const createClock = setInterval(displayTime, 1000);
​
clearInterval(createClock)

使用all().then()

Promise.all([P1, P2, ...]).then(fn)

只有当数组中所有promise都fulfilled，才执行then()中语句

使用.finally()执行最后语句：

myPromise
.then(response => {
  doSomething(response);
})
.catch(e => {
  returnError(e);
})
.finally(() => {
  runFinalCode();
});