使用JavaScript / jQuery "执行并等待用户输入

Using JavaScript / jQuery to "pause" execution and wait for user input

本文关键字：执行 等待 用户 输入 quot JavaScript jQuery 使用      更新时间：2023-09-26

我正在尝试使用JavaScript &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函数应该返回真或假，这似乎没有发生，相反，我达到最大调用大小。

这样做的基础是复杂和令人费解的，与手头的问题无关——我需要知道的是:
我如何让throwConfirm函数根据用户单击的按钮返回true或false ?

这显示了一种方法。这有点笨拙——会有更好的方法来设置回调而不是使用全局_callback变量

"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);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<input id="foo" type="button">
</body>

相关文章：