函数只返回事件

Question

我用console.log(openDialog()) 和openDialog() 调用一个函数，创建一个模态窗口，该函数只在某些事件上返回。

我的openDialog() 是这样的

function openDialog() {
  // do some html

  //
  buttonElement.onclick = function () {
    return 'some value';
  }
}

问题是当我调用console.log(openDialog())时，它会自动发现我的函数没有返回值，所以它只返回undefined。我希望它等到我的函数 openDialog() 返回一些东西。

也许是承诺？

编辑

有回调就这样吗？

function openDialog(cb) {
  // do some html

  buttonElement.onclick = function () {
    return cb('some value');
  }
}

console.log(openDialog(function (value) {
  return value;
});

Answer 1

因此，假设您尝试创建自定义 prompt()，您必须记住，我们无法同步。

这使用了同步的原生prompt函数：

var result = prompt("What's your name");

你不能创建这样的函数。相反，您需要使其异步：使用回调（或承诺）。

简单的回调接口

function openDialog(buttonElement, cb) {
  buttonElement.onclick = function () {
    cb('some value');
  }
}

// Open the dialog
openDialog(document.querySelector("button"), function (result) {
  // After getting the result, this will be called
  alert(result);  
});

<button>Submit</button>

Promise 接口

function openDialog(buttonElement) {
  var resolve = null;
  var promise = new Promise(function (_resolve) {
    resolve = _resolve;
  });
  buttonElement.onclick = function () {
    resolve('some value');
  }
  return promise;
}

// Open the dialog
openDialog(document.querySelector("button")).then(function (result) {
  // After getting the result, this will be called
  alert(result);  
});

<button>Submit</button>

---

如果您也想在回调中发送错误，您只需调用callback 函数并将错误作为第一个参数。在 Promises 的情况下，使用 reject 函数：

function openDialog(buttonElement) {
  var resolve = null;
  var reject = null;
  var promise = new Promise(function (_resolve, _reject) {
    resolve = _resolve;
    reject = _reject;
  });
  buttonElement.onclick = function () {
    var name = your_name.value;
    if (!name) {
      return reject(new Error("Please enter a name in the input."));
    }
    resolve(name);
  }
  return promise;
}

// Open the dialog
openDialog(document.querySelector("button")).then(function (result) {
  // After getting the result, this will be called
  alert(result);  
}).catch(function (err) {
  alert(err.message);
});

<input id="your_name" />
<button>Submit</button>

对于回调情况，只需调用cb(null, name) 表示成功，cb(new Error("Please enter a valid name")) 表示错误。然后你会这样称呼它：

openDialog(document.querySelector("button"), function (err, result) {
  if (err) { return alert(err.message); }
  // After getting the result, this will be called
  alert(result);  
});