Javascript 函数根据单击的按钮动态创建带有返回值的按钮

Question

我正在尝试创建一个风格化的是/否对话框，可以通过单个java脚本函数调用(创建和销毁)，该函数将根据单击的按钮返回一个值。但该函数仅返回声明的值，而不返回取决于单击的按钮的值。这是代码的核心:

<script>
function mbox(header, msg) {
    var result = false;
    var modal = document.createElement("div");
    var modal_ok = document.createElement("input");
    var modal_cancel = document.createElement("input"); 

    modal.id = "modal";

    modal_ok.id = "modal_ok";
    modal_ok.type = "submit";
    modal_ok.value = "OK";
    modal_ok.onclick = function(){clicked(1)};

    modal_cancel.id = "modal_cancel";
    modal_cancel.type = "submit";
    modal_cancel.value = "Cancel";
    modal_cancel.onclick = function(){clicked(0)};

    modal.appendChild(modal_ok);
    modal.appendChild(modal_cancel);    
    document.body.appendChild(modal);

    document.getElementById('modal_ok').focus();

    function clicked(param){
    if(param == 1){
        result = true;
    }else{
        result = false;}    

        var elem = document.getElementById("modal");
        elem.parentNode.removeChild(elem);  
    }

    return result;
}
</script>

<p id="demo">My First Paragraph.</p>
<script>
if(mbox("header", "msg") == true){document.getElementById("demo").innerHTML = "Paragraph changed.";}
</script>

请不要使用 jquery 或任何其他即时框架解决方案。我还在学习 javascript，所以我想了解这个概念。

预先感谢您的帮助，并对我的英语表示抱歉。

Answer 1

问题是显示对话框(并从中获取用户输入)是一个异步操作(即它不会立即产生结果)，并且您正在尝试同步使用它(比较返回类型)在您调用该函数的同一时刻)。

当 mbox() 方法到达返回结果时，用户尚未单击“确定”或“取消”。

解决此问题的一种方法是使用回调模式。您定义一个要在 mbox 关闭后执行的函数，并将其传递给 mbox()，如下所示:

<script>
mbox("header", "msg", function (result){
    if (result) {
        document.getElementById("demo").innerHTML = "Paragraph changed.";    
    }
});
</script>

然后修改 clicked() 方法以使用结果调用定义的回调:

function clicked(param) {
    if(param == 1) {
        result = true;
    } else {
        result = false;
    }    

    var elem = document.getElementById("modal");
    elem.parentNode.removeChild(elem);  

    callback(result); // or even shorter: callback(param == 1)
}

不要忘记更新 mbox() 方法以接受第三个(回调)参数，并且您基本上可以删除函数体末尾的 return 语句。

最后，如果您要使用大量异步函数，您可能需要查看其他结果处理解决方案，例如 Promises，因为回调中的回调有时很难正确处理(特别是当异步操作可能会失败/返回错误)。