Как остановить выполнение кода пока не нажато на кнопку?

Question

[Teleweb developer]

Здравствуйте, пытаюсь переопределить функцию alert чтобы показать свои стили, вот написал небольшой код:

window.alert = (...args) => {
  let string = "";
  for (let arg of args) {
    string += String(arg).replaceAll('<', '&lt;');
  }
  let alertAndroid = document.createElement("android-alert");
  alertAndroid.style.cssText = `
  width: 84.3%;
  display: block;
  border: 2px #333436 solid;
  position: fixed;
  left: 4.4%;
  margin: auto;
  top: 30%;
  padding: 10px;
  word-break: break-all;
  border-radius: 20px;
  background: #333436;
  color: white;`;
  alertAndroid.innerHTML = `<spam>${string}</spam><br>
  <button id="__android_ok_alert">OK</button>`;
  document.body.appendChild(alertAndroid);
  document.querySelector("#__android_ok_alert").onclick = function() {
    this.parentNode.remove();
  }
}

Но когда запустить этот код:

alert(2)
console.log(1)

то код выполнится друг за дружкой(появится диалоговое окно и вывод в консоле)
но мы знаем что такие функции как alert, prompt, confirm останавливают пока пользователь не нажмёт на кнопку, как это реализовать в моём случае, то есть чтобы вывод в консоле был после того как пользователь закроет моё диалоговое окно? Спасибо.

Answer 1

[Роман Жарков]

Сделай функцию асинхронной.

window.alert = (...args) => new  Promise(resolve => {
  let string = "";
  for (let arg of args) {
    string += String(arg).replaceAll('<', '&lt;');
  }
  let alertAndroid = document.createElement("android-alert");
  alertAndroid.style.cssText = `
  width: 84.3%;
  display: block;
  border: 2px #333436 solid;
  position: fixed;
  left: 4.4%;
  margin: auto;
  top: 30%;
  padding: 10px;
  word-break: break-all;
  border-radius: 20px;
  background: #333436;
  color: white;`;
  alertAndroid.innerHTML = `<spam>${string}</spam><br>
  <button id="__android_ok_alert">OK</button>`;
  document.body.appendChild(alertAndroid);
  document.querySelector("#__android_ok_alert").onclick = function() {
    this.parentNode.remove();
    return resolve();
  }
}});

// Где-то позже
async function(){ 
  await alert(2);
  console.log(1);
}

Comments

[Teleweb developer]

Только у тебя там две ошибки: первая: лишняя скобка и async function надо было ещё добавить имя для функции

Вот исправленый код:

window.alert = (...args) => new  Promise(resolve => {
  let string = "";
  for (let arg of args) {
    string += String(arg).replaceAll('<', '&lt;');
  }
  let alertAndroid = document.createElement("android-alert");
  alertAndroid.style.cssText = `
  width: 84.3%;
  display: block;
  border: 2px #333436 solid;
  position: fixed;
  left: 4.4%;
  margin: auto;
  top: 30%;
  padding: 10px;
  word-break: break-all;
  border-radius: 20px;
  background: #333436;
  color: white;`;
  alertAndroid.innerHTML = `<spam>${string}</spam><br>
  <button id="__android_ok_alert">OK</button>`;
  document.body.appendChild(alertAndroid);
  document.querySelector("#__android_ok_alert").onclick = function() {
    this.parentNode.remove();
    return resolve();
  }
});

// Где-то позже
async function x(){ 
  await alert(2);
  console.log(1);
}
x()