在JavaScript类中添加回调函数

问题描述：

我试图创建一个JavaScript类，它打开一个jQuery对话框并允许用户选择一个选项，然后在回调中返回选定的值。在JavaScript类中添加回调函数

jPrompt（消息，[值，标题，回调]）

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

的什么我到目前为止Here is a DEMO。但是，如果你注意到，这个值会被设定为亚马逊，我希望它等到用户点击确定。如果用户点击取消，那么它应该返回空或空字符串。

这里是我的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); 
    });

SOLUTION： 这就是终于做到了：

$(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); 
      }); 
     } 
    } 
}());

这不是一个类，这是一个对象！ – Raynos

函数是JS中的对象，您可以在Choose方法中使用参数f，在闭包中保存对它的引用，并在准备好回调时执行f（）。 – Thor84no

@Raynos同样的区别。 JS没有真正的类，只有原型和对象。 – Thor84no

答

Choose: function Choose(cb) { 
    Init(); 
    var myChoice = $("#myOptions").val(); 
    return cb(myChoice); 
}

应该做你想要

对不起，没有工作：/。我得到相同的结果。我想要的是用户选择了一个值后，然后显示值。 – capdragon

因此，如同我在评论中提到的那样，将函数引用存储在您的对象中，然后在准备就绪时调用它。 – Thor84no

@ Thor84no：请张贴并回答一个您正在谈论的示例。我无法想象你在说什么。 – capdragon

答

再添变数，你必须var _dialog，把它像var _callback什么。然后在你的Choose功能，添加一个参数，以获得回调函数和存储，是这样的：

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

然后，当你准备调用回调函数（我相信这是onButtonOK/onButtonCancel）呼叫回拨功能使用_callback(parameter);

在JavaScript类中添加回调函数

相关推荐