Question

我正在尝试创建一个程式化的yes / no对话框，可以通过单个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函数中返回值，因为您正在等待用户进行交互。您应该使用回调信息框，如下所示：

function mbox(header, msg, callback) {

您的点击功能如下所示：

function clicked(param){
    callback && callback(param === 1);
    modal.parentNode.removeChild(modal);
}

现在你可以这样称呼它：

mbox('Confirm','Please tell me you like this answer', function(bool){
    if(bool){
        document.getElementById("demo").innerHTML = "Paragraph changed.";
    }
});

Answer 2

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

当mbox（）方法到达return result时，用户尚未点击确定或取消。

解决此问题的方法是使用回调模式。您定义了一个在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，因为回调中的回调中的回调有时难以正确处理（特别是当异步操作可能失败/返回错误时。）

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

2 个答案: