Как подождать до какого-то события, а потом вернуть результат в JavaScript?

Question

Мне нужно сделать функцию, которая будет ждать, пока пользователь нажмёт кнопку, а потом возвращать результат. Я пробовал так:

let state = {"ready": false};
function getValue() {
    state.ready = false;
    document.getElementById("form").style.display="block";
    while(!state.ready) {}
    return document.getElementById("val").value;
}
function setReady() {state.ready = true}

<html>
<head>
</head>
<body>
<div id="form" style="display: none;">
<input id="val">
<button onclick="setReady();">OK</button>
</div>
<button onclick="alert(getValue());">Run</button>
</body>
</html>

Но браузер говорит, что страница зависла. Есть другой способ это сделать?

Answer 1

Попробуйте обработчик событий:

<button>Run</button>
<script>
  var button = document.querySelector("button");
  button.addEventListener("click", function() {
    alert("Кнопка нажата.");
  });
</script>

Answer 2

Решение через Proxy (для наблюдения за значением) и Promise (для "подождать"):

const observe = (obj, cfg) => new Proxy(obj, {
  set(target, prop, value) {
    if (cfg.hasOwnProperty(prop) && cfg[prop].when(value))
      cfg[prop].do(value); 
    target[prop] = value; 
    return true; 
  }, 
});
const stateData = { ready: false }, 
      stateObsCfg = {}, 
      state = observe(stateData, stateObsCfg); 

function getValue() {
  state.ready = false; 
  const form = document.getElementById('form'); 
  form.style.display = ''; 
  return new Promise(resolve => {
    stateObsCfg.ready = {
      when: v => v, 
      do: () => {
        const inp = document.getElementById('val'); 
        form.style.display = 'none'; 
        resolve(inp.value); 
        inp.value = ''; 
        delete stateObsCfg.ready; 
      }, 
    }; 
  }); 
}

function setReady(value) {
  state.ready = Boolean(value);
}

<div id="form" style="display: none;">
  <input id="val">
  <button onclick="setReady(true);">OK</button>
</div>
<button onclick="getValue().then(alert);">Run</button>

В объекте конфигурации наблюдателя stateObsCfg, свойство when предполагает коллбэк для вычисления условий, а свойство do - коллбэк действий (выполняемых если вызов when вернул истинное значение).
Динамическое изменение конфига возможно благодаря тому, что объекты в JS передаются по ссылке (референсу).

БЛОГ НА HUSL

Как подождать до какого-то события, а потом вернуть результат в JavaScript?

Ответы (2 шт):