我阅读了Promise / A规范,它在2.2.4之下说:

onFulfilled or onRejected must not be called until the execution context stack contains only platform code

但是在Firefox(我测试了38.2.1 ESR和40.0.3)中,以下脚本同步执行onFulfilled方法:

var p = Promise.resolve("Second");
p.then(alert);
alert("First");

(在这里似乎没有使用警报运行,也可以在这里尝试:http://jsbin.com/yovemaweye/1/edit?js,output)

它在其他浏览器或使用ES6Promise-polyfill时可以预期.

我在这里错过了什么吗?我总是认为then方法的一个要点是确保异步执行.

编辑:

它使用console.log工作,请参阅Benjamin Gruenbaum的回答:

function output(sMessage) {
  console.log(sMessage);
}

var p = Promise.resolve("Second");
p.then(output);

output("First");

正如他在评论中指出的,这也发生在使用同步请求时,这正是您在测试场景中发生的原因.
我创建了我们测试中发生的最小例子:

function request(bAsync) {
  return new Promise(function(resolve,reject) {
    var xhr = new XMLHttpRequest();
    xhr.addEventListener("readystatechange",function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        resolve(xhr.responseText);
      }
    });
    xhr.open("GET","https://sapui5.hana.ondemand.com/sdk/resources/sap-ui-core.js",!!bAsync);
    xhr.send();
  });
}

function output(sMessage,bError) {
  var oMessage = document.createElement("div");
  if (bError) {
    oMessage.style.color = "red";
  }
  oMessage.appendChild(document.createTextNode(sMessage));
  document.body.appendChild(oMessage);
}

var sSyncData = null;
var sAsyncData = null;

request(true).then(function(sData) {
  sAsyncData = sData;
  output("Async data received");
});

request(false).then(function(sData) {
  sSyncData = sData;
  output("Sync data received");
});


// Tests
if (sSyncData === null) {
  output("Sync data as expected");
} else {
  output("Unexpected sync data",true);
}
if (sAsyncData === null) {
  output("Async data as expected");
} else {
  output("Unexpected async data",true);
}

在Firefox中,这导致:

解决方法

这是因为您正在使用警报

当您在此处使用警报时,它将阻止所有投注关闭 – 页面已冻结,执行停止,事情处于“平台级”.

它可能被认为是一个错误,它肯定不是我期望的 – 但核心是这个关于警报和JavaScript任务/微任务语义之间的不兼容性.

如果您将该警报更改为console.log或附加到document.innerHTML,您将获得预期的结果.

var alert = function(arg) { // no longer a magical and blocking operation
  document.body.innerHTML += "<br/>" + arg;
}

// this code outputs "First,Second,Third" in all the browsers.

setTimeout(alert.bind(null,"Third"),0);

var p = Promise.resolve("Second");
p.then(alert);

alert("First");

从我可以说,这实际上是permitted optional behavior:

Optionally,pause while waiting for the user to ackNowledge the message.

(重点是我)

基本上,firefox做的是这样的:

>执行直到遇到第一个警报.
>在暂停之前运行任何微任务完成(任务暂停,而不是微任务).
>然后作为一个微任务运行,所以“第二”被排队等候,并在警报之前.
>第二个警报运行.
>第一个警报运行.

令人困惑,但可以从我能说的话中得到.

javascript – Firefox:Promise.then不会异步调用的更多相关文章

  1. JavaScript事件循环剖析宏任务与微任务

    这篇文章主要为大家介绍了JavaScript事件循环剖析宏任务与微任务示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  2. vue中的任务队列和异步更新策略(任务队列,微任务,宏任务)

    这篇文章主要介绍了vue中的任务队列和异步更新策略(任务队列,微任务,宏任务),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. React18 useState何时执行更新及微任务理解

    这篇文章主要为大家介绍了React18 useState何时执行更新及微任务理解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  4. JavaScript 微任务和宏任务讲解

    这篇文章主要分享了JavaScript 微任务和宏任务讲解,在js中,我们一般将所有的任务都分成两类,一种是同步任务,另外一种是异步任务。而在异步任务中,又有着更加细致的分类,那就是微任务和宏任务,下面来一起学习js中的微任务和宏任务吧

  5. Node.js中的async 和 await 关键字微任务和宏任务

    这篇文章主要介绍了Node.js中的async和await关键字微任务和宏任务,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下

  6. JavaScript宏任务和微任务区别介绍

    这篇文章主要介绍了JavaScript宏任务和微任务区别介绍,js中的任务,大致分为2类,一类是同步任务,另一类是异步任务。而异步任务,又分为宏任务和微任务,这两个任务是两个队列,所以是先进先出的

  7. 浅谈JavaScript宏任务和微任务执行顺序

    本文主要介绍了JavaScript宏任务和微任务执行顺序,结合实例代码进行了详细的讲解,需要的朋友们下面随着小编来一起学习学习吧

  8. JavaScript 操作宏任务与微任务

    这篇文章主要介绍了JavaScript 操作宏任务与微任务,简要说明了有关定时器和具体的代码实现,希望对你有所帮助

  9. 详解JS事件循环及宏任务微任务的原理

    在js中,我们一般将所有的任务都分成两类,一种是同步任务,另外一种是异步任务。而在异步任务中,又有着更加细致的分类,那就是微任务和宏任务。本文将详细讲解这二者的原理与使用,需要的可以参考一下

  10. javascript – Firefox:Promise.then不会异步调用

    js,output)它在其他浏览器或使用ES6Promise-polyfill时可以预期.我在这里错过了什么吗?

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部