如何按顺序运行 JavaScript 函数？答案

【问题标题】：How running JavaScript function in order?如何按顺序运行 JavaScript 函数？
【发布时间】：2022-01-28 21:40:56
【问题描述】：

我在做什么？
我正在尝试按顺序运行两个函数，但 JavaScript 正在同时调用和运行两个函数。

有什么问题？
如果在setProjects 函数之前调用setModalBox 函数，则会给出未定义错误。

我已经尝试过什么？
我尝试使用 Promise 和 setTimeout 它可以工作，但有时可以在之前调用 setModalBox 函数并给出相同的错误。

JavaScript 的一部分：

class Portifolio{
  init() {
    this.setProjects();
    // this.setModalBox();
  }

  setProjects() {
    let response_promise = fetch("contents/projects.json")

    document.addEventListener("DOMContentLoaded", function() {
      response_promise.then(response => response.json().then(projects => {
        // ? Gradient in border for each color language

        for(let project in projects){
          // Div project
          var div = document.createElement("div");
          div.className = "project";
          div.id = `project-${projects[project].name}`
          document.querySelector(".projects").appendChild(div);

          // Tittle project
          var h1 = document.createElement("h1");
          h1.className = "tittle-project";
          h1.innerHTML = projects[project].name;
          document.querySelector(`#project-${projects[project].name}`).appendChild(h1);

          // Paragraph project
          var p = document.createElement("p");
          p.className = "about-project";
          p.innerHTML = projects[project].about;
          document.querySelector(`#project-${projects[project].name}`).appendChild(p);
        }
      }))
    }, false)

    return new Promise((resolve, reject)=>{
      setTimeout(()=>{
        this.setModalBox()
      }, Math.random() * 2000)
    })
  };

  setModalBox(){
    let projectsLength = document.querySelectorAll(".projects")[0].children.length;
    let modalBox = this.modalBox;

    for(let i = 0; i <= projectsLength; i++){
      let projectsAll = document.querySelectorAll(".projects")[0].children[i];

      // That "try" is for not to show error in console
      try{
        // Open Modal Box
        projectsAll.onclick = function(){
          modalBox.style.display = "block"
        };
      }catch{}

      // Close Modal Box, when click at "X"
      this.modalBoxClose.onclick = function(){
        modalBox.style.display = "None"
      };

      // Close Modal Box, when click out of Modal Box
      window.onclick = function(){
        if(event.target == modalBox){
          modalBox.style.display = "None"
        }
      }

      // Close Modal Box, when press esc key
      document.addEventListener("keydown", function(event){
        if(event.key == "Escape"){
          modalBox.style.display = "None"
        }
      })
    }
  }
}

HTML：

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Projetos - Vitor Hugo's Portifolio</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>

  <body>
    <header>
      <div id="wrapperJS" style="position: relative; overflow: hidden">
      <nav>
        <a class="logo" href="/">Vitor Hugo</a>
        <div class="mobile-menu">
          <div class="line-1"></div>
          <div class="line-2"></div>
          <div class="line-3"></div>
        </div>
          <ul class="nav-list">
            <li><a href="index.html">Home</a></li>
            <li><a href="sobre.html">Sobre</a></li>
            <li><a href="projetos.html">Projetos</a></li>
            <li><a href="contatos.html">Contato</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <script src="mobile-screen.js"></script>

    <!-- Boxes -->
    <div class="projects"></div>

    <!-- Modal Boxes -->
    <div class="modal-box">
      <div class="modal-box-contents">
        <span class="modal-box-close">&times;</span>
        <p>test</p>
      </div>
    </div>
  </body>
</html>

我必须做什么？请帮我。如果需要更多信息，请询问。对于我正在学习英语的任何拼写和语法错误，我们深表歉意。

【问题讨论】：

为什么要在循环中分配this.modalBoxClose.onclick 和window.onclick？这些作业不使用projectsAll，所以它们应该只做一次。
setProjects() 异步运行。您需要在其回调函数中调用setModalBox()。或者它应该返回一个承诺，以便您可以在其 .then() 方法中调用 setModalBox()。
1 选项：异步/等待 setProjects() 函数。 2 选项：使用回调

标签： javascript html css async-await

【解决方案1】：

尝试异步/等待。例如，您可以这样做：

const setProjects = async () => {
try {
await // Put your code here
}catch (err){
console.log(err)
}
};

然后：

setProjects().then(setModalBox());

现在您的函数将按顺序执行。

【讨论】：

该函数在一个类中，所以当我使用 const 函数时，它会给出错误：类成员不能有 'const' 关键字。

【解决方案2】：

您可以在 DOMContentLoaded 事件处理程序的末尾调用 setModalBox。

【讨论】：