使用JavaScript / jQuery“暂停”执行并等待用户输入

Question

我正在尝试使用JavaScript＆amp; jQuery覆盖标准功能 - 即alert和confirm。

为此，我在代码要求提醒或确认时构建了一个显示对话框的内容，如下所示：

function throwError(e_content) {
    var e_title = "Error";
    var e = errordiv;
    var return_error = e.start + e.header_start + e_title + e.header_end + e.body_start + e_content + e.body_end + e.end;
    jQuery("body").append(return_error);
    return;
}

function throwConfirm(e_content) {
    function confirmCallback() {
        var retval = "213";
        jQuery("body").on("click", function (e) {
            if (e.target.id == "confirm_okay") {
                hideError();
                retval = true;
            }
            else if (e.target.id == "confirm_cancel") {
                hideError();
                retval = false;
            }
        })

        retval == "213" ? confirmCallback() : retval;
        return retval;
    }

    var e_title = "Confirm Action";
    var e = confirmdiv;
    var return_error = e.start + e.header_start + e_title + e.header_end + e.body_start + e_content + e.body_end + e.end;
    jQuery("body").append(return_error);

    return confirmCallback();
}

function hideError () {
    jQuery(document).find(".custom_error_div").remove();
    return;
}

var errordiv = {
    start:  '<div class="custom_error_div"><div class="custom_error_div_content" >',
    end: '</div></div>',

    header_start: '<div class="custom_error_div_header">',
    header_end: '</div>',

    body_start: '<div class="custom_error_div_body">',
    body_end: '<div class="bottom-buttons">'
    + '<button id="alert_okay">Ok</button>'
    + '</div>'
};

var confirmdiv = {
    start:  '<div class="custom_error_div"><div class="custom_error_div_content" >',
    end: '</div></div>',

    header_start: '<div class="custom_error_div_header">',
    header_end: '</div>',

    body_start: '<div class="custom_error_div_body">',
    body_end: '<div class="bottom-buttons">'
    + '<button id="confirm_okay">Ok</button><button id="confirm_cancel">Cancel</button>'
    + '</div>'
};

这个的基础是工作，它在我想要的时候发出警报并确认 - 但是确认是一个问题，当点击“是”或“否”时，throwConfirm函数应该返回true或者这似乎没有发生，相反，我达到最大通话大小。

这样做的基础是复杂而复杂的，与手头的问题无关 - 我需要知道的是：
如何根据用户点击的按钮让throwConfirm函数返回true或false？

Answer 1

这显示了一种方法。这是一种kludgy - 这将成为设置回调的更好方式，而不是使用全局_callback变量

＆＃13;

＆＃13;

"use strict";

function throwError(e_content) {
    var e_title = "Error";
    var e = errordiv;
    var return_error = e.start + e.header_start + e_title + e.header_end + e.body_start + e_content + e.body_end + e.end;
    jQuery("body").append(return_error);
    return;
}

function throwConfirm(e_content, callback) {
    hideError();
    var e_title = "Confirm Action";
    var e = confirmdiv;
    var return_error = e.start + e.header_start + e_title + e.header_end + e.body_start + e_content + e.body_end + e.end;
    jQuery("body").append(return_error);
  // this is a hack, but I'm tired
  _callback = callback
}

function hideError () {
    jQuery(document).find(".custom_error_div").remove();
    return;
}

var errordiv = {
    start:  '<div class="custom_error_div"><div class="custom_error_div_content" >',
    end: '</div></div>',

    header_start: '<div class="custom_error_div_header">',
    header_end: '</div>',

    body_start: '<div class="custom_error_div_body">',
    body_end: '<div class="bottom-buttons">'
    + '<button id="alert_okay">Ok</button>'
    + '</div>'
};

var confirmdiv = {
    start:  '<div class="custom_error_div"><div class="custom_error_div_content" >',
    end: '</div></div>',

    header_start: '<div class="custom_error_div_header">',
    header_end: '</div>',

    body_start: '<div class="custom_error_div_body">',
    body_end: '<div class="bottom-buttons">'
    + '<button id="confirm_okay">Ok</button><button id="confirm_cancel">Cancel</button>'
    + '</div>'
};

var _callback;
function init() {
    jQuery("body").on("click", function (e) {
        if (e.target.id == "confirm_okay") {
            hideError();
            _callback( true );
        }
        else if (e.target.id == "confirm_cancel") {
            hideError();
            _callback( false );
        }
    })
    $(document).on("click", "#foo", function() { throwConfirm("bar", doSomethingWithMyRetval) } );
}

function doSomethingWithMyRetval(foo) {
// foo foo foo
console.log("The retval from the confirm was: "+foo);
}
$(document).ready(init);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<input id="foo" type="button">
</body>

＆＃13;

＆＃13;

＆＃13;