在JavaScript中创建自定义回调
我所要做的就是当我的当前函数执行结束时执行一个回调函数。
function LoadData() { alert('The data has been loaded'); //Call my callback with parameters. For example, //callback(loadedData , currentObject); }
这个功能的消费者应该是这样的:
object.LoadData(success); function success(loadedData , currentObject) { //Todo: some action here }
我如何实现这个?
实际上,你的代码几乎可以工作,只要将你的回调声明为一个参数,你可以直接使用参数名称来调用它。
基础
function doSomething(callback) { // ... // Call the callback callback('stuff', 'goes', 'here'); } function foo(a, b, c) { // I'm the callback alert(a + " " + b + " " + c); } doSomething(foo);
这将称为doSomething
,这将调用foo
,这将提醒“东西在这里”。
请注意,传递函数引用 ( foo
)非常重要,而不是调用函数并传递其结果( foo()
)。 在你的问题中,你做得正确,但是值得指出,因为这是一个常见的错误。
更先进的东西
有时候你想调用回调函数,这样就可以看到具体的值。 您可以使用JavaScript call
函数轻松完成此操作:
function Thing(name) { this.name = name; } Thing.prototype.doSomething = function(callback) { // Call our callback, but using our own instance as the context callback.call(this); } function foo() { alert(this.name); } var t = new Thing('Joe'); t.doSomething(foo); // Alerts "Joe" via `foo`
你也可以传递参数:
function Thing(name) { this.name = name; } Thing.prototype.doSomething = function(callback, salutation) { // Call our callback, but using our own instance as the context callback.call(this, salutation); } function foo(salutation) { alert(salutation + " " + this.name); } var t = new Thing('Joe'); t.doSomething(foo, 'Hi'); // Alerts "Hi Joe" via `foo`
有时将你想给回调的参数作为一个数组而不是单独传递是有用的。 你可以使用apply
来做到这一点:
function Thing(name) { this.name = name; } Thing.prototype.doSomething = function(callback) { // Call our callback, but using our own instance as the context callback.apply(this, ['Hi', 3, 2, 1]); } function foo(salutation, three, two, one) { alert(salutation + " " + this.name + " - " + three + " " + two + " " + one); } var t = new Thing('Joe'); t.doSomething(foo); // Alerts "Hi Joe - 3 2 1" via `foo`
在尝试执行回调之前确保回调是一个实际的函数是一个好习惯:
if (callback && typeof(callback) === "function") { callback(); }
我的2分。 相同但不同…
<script> dosomething("blaha", function(){ alert("Yay just like jQuery callbacks!"); }); function dosomething(damsg, callback){ alert(damsg); if(typeof callback == "function") callback(); } </script>
function loadData(callback) { //execute other requirement if(callback && typeof callback == "function"){ callback(); } } loadData(function(){ //execute callback });
function callback(e){ return e; } var MyClass = { method: function(args, callback){ console.log(args); if(typeof callback == "function") callback(); } }
==============================================
MyClass.method("hello",function(){ console.log("world !"); });
==============================================
结果是:
hello world !
function LoadData(callback) { alert('the data have been loaded'); callback(loadedData, currentObject); }
当调用回调函数时,我们可以像下面这样使用它:
consumingFunction(callbackFunctionName)
例:
// Callback function only know the action, // but don't know what's the data. function callbackFunction(unknown) { console.log(unknown); } // This is a consuming function. function getInfo(thenCallback) { // When we define the function we only know the data but not // the action. The action will be deferred until excecuting. var info = 'I know now'; if (typeof thenCallback === 'function') { thenCallback(info); } } // Start. getInfo(callbackFunction); // I know now
这是Codepend的完整例子。
尝试:
function LoadData (callback) { // ... Process whatever data callback (loadedData, currentObject); }
函数是JavaScript中的第一类; 你可以通过他们周围。