Question

我期望输出：A，B，C。但它不起作用。如果函数handleClick（element）无法更改，我该如何更改其他函数以确保所有代码按顺序执行并按预期输出A，B，C？

＆＃13;

async function handleClick(element) {
  setTimeout(function(){
    console.log(`Click on Element_${element}`);
  }
  , Math.random(5)*1000);
}

async function clickLetter(letter) {
  await handleClick(letter);
}

async function clickGroup(group) {
  await handleClick(group);
}

const letters = ['A', 'B', 'C'];

function clickLetters(letters, fn) {
  let index = 0;
  return new Promise(function(resolve, reject) {
    function next() {
      if (index < letters.length) {
        fn(letters[index++]).then(next, reject);
      } else {
        resolve();
      }
    }
    next();
  });
}

clickLetters(letters, clickLetter);

＆＃13;

Answer 1

如前所述，async库是一种方法。

如果您想继续使用当前的解决方案，问题出在您的handleClick()，其中隐含的承诺在超时之前立即返回。然后，根据每次传递的随机超时，它将导致out或ordr执行。修复只是解决了承诺，然后超时。

＆＃13;

function handleClick(element) {
  return new Promise(resolve => {
    setTimeout(function(){
      console.log(`Click on Element_${element}`);
      resolve();
    }
    , Math.random(5)*1000);
  });
}

async function clickLetter(letter) {
  await handleClick(letter);
}

function clickLetters(letters, fn) {
  let index = 0;
  return new Promise(function(resolve, reject) {
    function next() {
      if (index < letters.length) {
        fn(letters[index++]).then(next, reject);
      } else {
        resolve();
      }
    }
    next();
  });
}

const letters = ['A', 'B', 'C'];
clickLetters(letters, clickLetter);

＆＃13;

Answer 2

了解异步并等待此处。

Async
Await

这是代码。说明就在最后。

async function handleClick(element) {
   return new Promise((resolve, reject) => {
     setTimeout(function(){
       console.log(`Click on Element_${element}`);
       resolve();
     }, Math.random(5)*1000);
  });
}

async function clickLetter(letter) {
  await handleClick(letter);
}

async function clickGroup(group) {
  await handleClick(group);
}

const letters = ['A', 'B', 'C'];

async function clickLetters(letters, fn) {
  for(let i=0; i<letters.length; i++) {
    await clickLetter(letters[i]);
  }
}

clickLetters(letters, clickLetter);

解释您需要进行哪些更改 -

第1步 - 转换handleClick函数以返回Promise。
第2步 - 使用await功能中的clickLetters按顺序打印值。

Answer 3

setTimeout函数是异步的，结果立即返回，你需要将它包装在一个promise构造函数中，然后解析它。

＆＃13;

function handleClick(element) {
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       console.log(`Clicked on Element_${element}`);
       resolve();
     }, Math.random(5) * 1000);
  });
}

async function clickLetter(letter) {
  await handleClick(letter);
}

async function clickGroup(group) {
  await handleClick(group);
}

const letters = ['A', 'B', 'C'];

async function clickLetters(letters, fn) {
  for(let i = 0; i < letters.length; i++) {
    await clickLetter(letters[i]);
  }
}

clickLetters(letters, clickLetter);

＆＃13;

如何按顺序执行javascript？

3 个答案: