Self-referential Callbacks

Question

Issue Resolved, any comments on best practice would be welcome

I'm working on a JS (and JQuery) Battleships game and have function 'dropBoat' that allows a user to place a ship on a board. The details of this function are not important (it takes board and boatLength as arguments) however I'm unable to reuse it to place a second boat.

I'm trying to achieve this chain of events:

dropBoat function called --> dropBoat function called --> dropBoat function called --> StartPlay function called. Here's a sketch of my current attempt.

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

this seems to work

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

You don't want to bind event handlers multiple times. Move the keydown handler out of your function code and to the top level.

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

That being said, how about simply using a loop?

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

You need to declare your callback as an argument and you can call it directly using the argument name.

function doSomething(callback) {
     // ...

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

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

doSomething(foo);

like this u will need to call your callback function.

Check this answer for more details :

https://stackoverflow.com/a/2190872/4763053

Answer 3

this seems to work

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

defining functions rather than variables stops the code from executing immediately.