自引用回调

Question

问题已解决，欢迎对最佳实践提出任何意见

我正在开发一款 JS（和 JQuery）战舰游戏，并且具有允许用户在棋盘上放置一艘船的功能 'dropBoat'。这个函数的细节并不重要（它以 board 和 boatLength 作为参数）但是我无法重新使用它来放置第二艘船。

我正在努力实现这一系列事件：

调用了 dropBoat 函数 --> 调用了 dropBoat 函数 --> 调用了 dropBoat 函数 --> 调用了 StartPlay 函数。这是我当前尝试的草图。

var dropBoat = function(board, length, callback){
    //function code here
    $(document).keydown(function(e){
        if(e.which == "38"){
            //more function code here
            callback()
        }
    }
}

var dropThirdBoat = dropBoat(board1, 3, startPlay);
var dropSecondBoat = dropBoat(board1, 2, dropThirdBoat);
var dropFirstBoat = dropBoat(board1, 3, dropSecondBoat)();

这似乎有效

var dropThirdBoat = function(){
    dropBoat(board1, 3, startPlay);
}
var dropSecondBoat = function(){
    dropBoat(board1, 2, dropThirdBoat);
}
var dropFirstBoat = dropBoat(board1, 3, dropSecondBoat);
    var dropBoat = function(board, length, callback){
    //function code here
    $(document).keydown(function(e){
        if(e.which == "38"){
            //more function code here
            callback();
        }
    }
}

Answer 1

您不想多次绑定事件处理程序。将 keydown 处理程序移出您的函数代码并移至顶层。

$(document).keydown(function (e) {
    if (e.which == "38"){
        //more function code here
        callback();
    }
}

话虽如此，简单地使用循环怎么样？

var dropBoat = function(board, length){
    //function code here
}

var board1 = new BattleshipBoard(),
    board2 = new BattleshipBoard(),
    boats = [1, 1, 1, 2, 2, 3, 5],
    b;

for (b = 0; b < boats.length; b++) {
    dropBoat(board1, boats[b]);
    dropBoat(board2, boats[b]);
}

Answer 2

您需要将回调声明为参数，您可以使用参数名称直接调用它。

function doSomething(callback) {
     // ...

    // Call the callback
    callback('stuff', 'goes', 'here');
}

function foo(a, b, c) {
    // your operations
    alert(a + " " + b + " " + c);
}

doSomething(foo);

像这样你需要调用你的回调函数。

查看此答案了解更多详情：

Answer 3

这似乎有效

var dropThirdBoat = function(){
    dropBoat(board1, 3, startPlay);
}
var dropSecondBoat = function(){
    dropBoat(board1, 2, dropThirdBoat);
}
var dropFirstBoat = dropBoat(board1, 3, dropSecondBoat);
var dropBoat = function(board, length, callback){
   var storeCall = storeVal(callback);
   //function code here
    $(document).keydown(function(e){
        if(e.which == "38"){
            //more function code here
            storeCall()();
        }
    }
}

定义函数而不是变量会阻止代码立即执行。

自引用回调

Self-referential Callbacks

javascript

jquery

callback

closures