element.classList.add在功能之前运行

Question

以某种方式看起来像在运行第一个console.log()之前添加了类，我猜这是因为我错过了一些关于async函数的事情，但是据我所知，日志记录和添加课程部分不是async，所以我不确定这怎么可能。

---

现在，我阅读了“重复”内容，它解释了此行为。但是现在这个问题基本上是一个源于另一个问题的调试的问题。

// most used elements

let samaritan = document.getElementsByClassName('samaritan')[0];
let helper = document.getElementById('helper');
let content = document.getElementById('content');

// global constants

const template = "/isik-kaplan/sources/{0}.html";

// Prototypes

Element.prototype.remove = function() {
  this.parentElement.removeChild(this);
};
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
  for (let i = this.length - 1; i >= 0; i--) {
    if (this[i] && this[i].parentElement) {
      this[i].parentElement.removeChild(this[i]);
    }
  }
};

String.prototype.format = function() {
  let formatted = this;
  for (let i = 0; i < arguments.length; i++) {
    let regexp = new RegExp('\\{' + i + '\\}', 'gi');
    formatted = formatted.replace(regexp, arguments[i]);
  }
  return formatted;
};

// utilities

function get_width(val) {
  let c = document.createElement("canvas");
  let ctx = c.getContext("2d");
  return ctx.measureText(val).width;
}

function update(elm, value) {
  samaritan.style['width'] = get_font_size(elm) / 10 * value;
}

function get_font_size(elm) {
  return parseInt(window.getComputedStyle(elm, null).getPropertyValue('font-size'))
}

const sleep = (milliseconds) => {
  return new Promise(resolve => setTimeout(resolve, milliseconds))
};

let value_change = new Event('value_change');

async function stream_write(elm, input) {
  for (let i = 0; i < input.length; i++) {
    await sleep(2);
    elm.value += input.charAt(i);
    elm.dispatchEvent(value_change);
  }
}

async function stream_clean(elm) {
  while (elm.value !== '') {
    await sleep(2);
    elm.value = elm.value.slice(0, -1);
    elm.dispatchEvent(value_change);
  }
}

document.addEventListener('DOMContentLoaded', function() {
  samaritan.style['width'] = get_width(samaritan.placeholder) * get_font_size(samaritan) / 10;
  samaritan.onfocus = function() {
    samaritan.placeholder = ''
  };
  samaritan.onblur = function() {
    if (samaritan.value === '') {
      let placeholder = 'Welcome';
      samaritan.placeholder = placeholder;
      update(samaritan, get_width(placeholder));
    }
  };
  samaritan.oninput = function() {
    update(samaritan, get_width(samaritan.value))
  };
  samaritan.addEventListener('value_change', () => {
    update(samaritan, get_width(samaritan.value))
  })

});

document.onkeypress = function(e) {
  samaritan.focus();
};

async function async_for_each(array, callback) {
  for (let index = 0; index < array.length; index++) {
    await callback(array[index], index, array);
  }
}





// RELEVANT PART IS HERE //

async function replace_content(template) {
  _replace_content(content, "<p> HELLO </p>")
}

function _replace_content(element, new_content) {
  element.classList.add('hide'); // This is here so I can change it with show and make it "fade-in"
  try {
    element.firstChild.remove()
  } catch (e) {
    void 0
  }
  element.insertAdjacentHTML("afterbegin", new_content);
  element.classList.replace('hide', 'show') // When it hits here, the element just pops in
}

// main

(async() => {
  await async_for_each(["Portfolio", "Contact", "About", "Bio"],
    async(input) => {
      await stream_write(samaritan, input);
      await stream_clean(samaritan)

    }
  );
  await stream_write(samaritan, "Help");
  await sleep(20);
  helper.classList.replace('hide', 'show');
  await sleep(200);
  await replace_content(template.format('bio'));
})();

body {
  width: 100vw;
  height: 80vh;
  overflow: hidden;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 140%;
  align-items: center;
  justify-content: center;
}

.wrapper .content {
  width: 30%;
  height: 30%;
  justify-content: unset;
}

.samaritan {
  border: 0;
  font-size: 48px;
  box-shadow: none;
  border-bottom: 1px solid #000;
  margin-bottom: 24px;
}

 :focus {
  outline: none;
}

.text {
  font-size: 18px;
  text-transform: uppercase;
}


/* RELEVANT CSS */

.show {
  transition: opacity 800ms;
}

.hide {
  opacity: 0;
}

<html>

<head>
  <title>Işık Kaplan</title>
  <link rel="stylesheet" type="text/css" href="onecsstorulethemall.css">
  <script defer src="onescripttorulethemall.js"></script>
</head>

<body>
  <div class="wrapper">
    <input type="text" class="samaritan" placeholder="" spellcheck="false" autocapitalize="off" />
    <span class="text hide" id="helper">Can't find what you are looking for?</span>
    <div id="content" class="wrapper content"></div>
  </div>
</body>

</html>

同样，我没有删除任何内容，因为我不确定到底是哪里发生了异常行为，但是我对//RELEVANT PART进行了评论，认为可能是问题所在。并将它们放在代码块的最后。