在JavaScript类中添加回调功能

add callback functionality in a JavaScript class

本文关键字:回调 功能 添加 JavaScript      更新时间:2023-09-26

我正在尝试创建一个javascript类,该类打开一个jQuery对话框,允许用户选择一个选项,然后在回调中返回所选值。

类似于jQuery Alert对话框的操作方式。

jPrompt(消息,[值,标题,回调](

jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
    if( r ) alert('You entered ' + r);
});

这是我迄今为止的演示。但如果你注意到,这个值会立即设置,我希望它等到用户单击"确定"。如果用户单击"取消",那么它应该返回null或空字符串。

这是我的Javascript类:

var namespace = {};
(namespace.myChooser = function () {
    var _dialog = null;
    /** 
    * Function : onButtonCancel
    */
    function onButtonCancel() {
        _dialog.dialog("close");
        return null;
    }
    /** 
    * Function : onButtonOK
    */
    function onButtonOK() {
        _dialog.dialog("close");
    }
    /** 
    * Function : Initialize
    */
    function Init() {
        var dialog_options = {
            modal: false,
            disabled: false,
            resizable: false,
            autoOpen: false,
            //height: 460,
            maxHeight: 300,
            zIndex: 500,
            stack: true,
            title: 'My Chooser',
            buttons: { "OK": onButtonOK, "Cancel": onButtonCancel }
        };
        _dialog = $("#myDialog");
        // create dialog.
        _dialog.dialog(dialog_options);
        _dialog.dialog("open");
    }
    return {
        Choose: function Choose() {
            Init();
            var myChoice = $("#myOptions").val();
            return myChoice;
        }
    }
}());

我希望能够做这样的事情:

namespace.myChooser.Choose(function (myChoice) {
       $("span#myChoice").text(myChoice);
    });

解决方案:这就是最终做到的:

$(document).ready(function () {
    $('#myButton').click(function () {
        namespace.myChooser.Choose(function (x) {
            console.log(x);
        });
    });
});
var namespace = {};
(namespace.myChooser = function (callback) {
    function _show(callback) {
            var dialog_options = {
                modal: false,
                disabled: false,
                resizable: false,
                autoOpen: false,
                //height: 460,
                maxHeight: 300,
                zIndex: 500,
                stack: true,
                title: 'My Chooser',
                buttons: { 
                    "OK": function () {
                        if (callback) callback("OK");
                    },
                    "Cancel": function () {
                        if (callback) callback("Cancel");
                    }
                }
            };
            _dialog = $("#myDialog");
            // create dialog.
            _dialog.dialog(dialog_options);
            _dialog.dialog("open");
    }
    return {
        Choose: function (callback) {
            _show(function (result){
                if (callback) callback(result);
            });
        }
    }
}());
Choose: function Choose(cb) {
    Init();
    var myChoice = $("#myOptions").val();
    return cb(myChoice);
}

应该执行您想要的

在有var _dialog的地方添加另一个变量,称之为var _callback。然后在Choose函数中,添加一个参数来获取回调函数并存储它,类似于:

Choose: function Choose(f) {
    _callback = f;
    ...
}

然后,当您准备好调用回调函数时(我想这是在onButtonOK/onButtonCancel中(,使用_callback(parameter); 调用回调函数