Question

我正在尝试使用回调来有效地“覆盖”标准警报并确认JavaScript中的操作。

我正在使用的代码有点长，所以我把它记录到一个有用的jsfiddle

我试图得到它，以便回调用于确定真或假，但它回复为未定义，因为回拨函数在点击之前被触发

我的问题是，我如何更改它以有效克服在通过jQuery调用点击之前返回的函数值？

使用示例：

<button onclick="confirm('This is a test')">Show dialog (confirm)</button>

jQuery事件示例：

if (confirm("This is a test")) {
    alert("Confirmed")
}
else {
    alert("Did not confirm")
}

修改
在回调中使用循环搞砸了我们很多......

Answer 1

等待返回值时，你正在混淆。

您正在传递dialog.checkForInput作为回调。但是在dialog.show()函数中你做了：

var ret = callback();
...
return ret;

但是dialog.checkForInput函数没有返回任何内容，它只是设置事件监听器。

因为事件全部运行＆＃34;异步＆＃34;为对话框提供一个回调函数会更加明智，该函数将在实际存在事件时运行。含义：在你的checkForInput函数中（我会用不同的名称命名，但无论如何）运行回调并将操作作为参数传递。类似的东西：

checkForInput: function () {
    $(document).ready(function () {
        $(".dialog_confirm_okay").on("click", function () {
            dialog.hide();
            callback('confirm');
        })
        $(".dialog_confirm_cancel").on("click", function () {
            dialog.hide();
            callback('cancel');
        })
        $(".dialog_alert_okay").on("click", function () {
            dialog.hide();
            callback('alert');
        })
    })
}

你的回调可能看起来像这样（假设你的回调叫做dialogCallback）：

function dialogCallback ( action ) {
    alert('Dialog closed with action: ' + action);
};

Answer 2

我从您的代码中得出的一些观点：

声明callback()返回undefined值的原因是dialog.checkForInput没有返回任何内容。
$(document).ready内的checkForInput是异步的，因此该块的返回值毫无意义（它也不会成为checkForInput的返回值。）
并且你将return语句放在事件声明中，它将成为事件的返回值（当事件触发时），而不是checkForInput。

我对你的代码进行了一些修改，这个修改了。基本上我创建了一个名为onclick的新方法，每次点击是或否时都会调用该方法。

show: function (e_type, e_content) {
    var d = dialog;
    var d_head = e_type == "confirm" ? "Confirm Action" : "Error";
    var d_buttons = e_type = "confirm" ? d.parts.buttons.okay + d.parts.buttons.cancel : d.dparts.buttons.alert_okay;
    var _dialog = d.parts.main + d.parts.head.replace("{DIV_HEADER}", d_head) + d.parts.body + e_content + "<div class='dialog_button_container'>" + d_buttons + "</div>" + d.parts.footer;

    $("body").append(_dialog);
},

onclick: function (ret) {
    $(".errors").text("Return value was: " + ret);
},

showError: function (e_content) {
    dialog.show("alert", e_content);
    dialog.checkForInput();
},

showConfirm: function (e_content) {
    dialog.show("confirm", e_content);
    dialog.checkForInput();
},

checkForInput: function () {
    var self = this;

    $(".dialog_confirm_okay").on("click", function () {
        dialog.hide();
        self.onclick(true);
    })
    $(".dialog_confirm_no").on("click", function () {
        dialog.hide();
        self.onclick(false);
    })
    $(".dialog_alert_okay").on("click", function () {
        dialog.hide();
        self.onclick(false);
    })
},

工作示例：https://jsfiddle.net/p83uLeop/1/

希望这会对你有所帮助。

EDITED

在评论部分，我假设您希望此提醒成为window.confirm之类的阻止功能，因此您可以执行if (confirm('Are you sure'))之类的操作。

但遗憾的是，这种情况无法实现。

我有一些建议，你可以更好地封装你的代码，并实现干净的回调或承诺。也许是这样的：

showConfirm(function (ok) {
    if (ok) {
        // "yes" clicked
    } else {
        // "no" clicked
    }
})

// or

showConfirm(function () {
    // "yes" clicked
}, function () {
    // "no clicked"
})

// or 

var customConfirm = showConfirm()
customConfirm.on('yes', function () {
    // "yes" clicked
})
customConfirm.on('no', function () {
    // "no" clicked
})

使用回调JS / JQuery

2 个答案:

EDITED