javascript - Promise 链上的 2 个函数被异步调用

Question

我正在学习 javascript Promise。我创建了 2 个独立的函数，并将它们链接在一个 promise 函数中。然而，第二个函数首先被调用，即使它位于第二个 then() 块中。

代码如下。

const one = document.getElementById('one');

function clkw(a){
    setTimeout(() => {
        one.innerHTML = a;
        return 2*a;
    }, 2000);
}

function clkw2(b){
    setTimeout(() => {
        one.innerHTML += ' '+b;
    }, 2000);
}

function trypromise(){
    const np = new Promise(resolve => {
        setTimeout(() => { 
            resolve(10)
        }, 2000);
    });

    np
        .then(function(data){
            return clkw(data);
        })
        .then(function(bata){
            clkw2(bata);
        });
}

标签： javascriptpromise

Answer 1

然而，第二个函数首先被调用，即使它位于第二个 then() 块中。

在您提供的代码中，一切都按预期工作。你是如何观察到这种奇怪的行为的？

const one = document.getElementById('one');

function clkw(a) {
  console.log("clkw");
  setTimeout(() => {
    one.innerHTML = a;
    return 2 * a;
  }, 2000);
}

function clkw2(b) {
  console.log("clkw2");
  setTimeout(() => {
    one.innerHTML += ' ' + b;
  }, 2000);
}

function trypromise() {
  const np = new Promise(resolve => {
    setTimeout(() => {
      resolve(10)
    }, 2000);
  });
  np
    .then(function(data) {
      return clkw(data);
    })
    .then(function(bata) {
      clkw2(bata);
    });
}

trypromise()

<div id="one"></div>