soumya rakshit soumya rakshit - 1 month ago 7
AngularJS Question

My application runs perfectly if I apply breakpoints and run the application in debugging mode otherwise not

I am using Ionic Framework to develop my application and I have Firebase as the back-end. I put breakpoints and try to run the application it works fine . However if I run the application without the debugger, I see values not being changed in the Firebase database and also page transition fails. Any probable reason why it behaves in this fashion.

Part of my html:

<a class="button button-balanced button-block" id="snooker-button1" ng-click = "setTitle('Table 1')" ui-sref="tableX">Table 1</a>
<a class="button button-balanced button-block" id="snooker-button2" ng-click = "setTitle('Table 2')" ui-sref="tableX">Table 2</a>
<a class="button button-balanced button-block" id="snooker-button3" ng-click = "setTitle('Table 3')" ui-sref="tableX">Table 3</a>
<a class="button button-balanced button-block" id="snooker-button4" ng-click = "setTitle('Table 4')" ui-sref="tableX">Table 4</a>
<a class="button button-assertive button-block" id="snooker-button5" ng-click = "setTitle('Table 5')" ui-sref="tableX">Table 5</a>
<a class="button button-balanced button-block" id="snooker-button6" ng-click = "setTitle('Table 6')" ui-sref="tableX">Table 6</a>
<!-- <div style="" class="button-bar"></div> -->
<div style="" class="button-bar">
<button class="button button-calm button-block button-outline" style="font-weight:600;" id="page3-button11" ng-click = "gameEngine_v()" >Start</button>
<button class="button button-calm button-block button-outline" style="font-weight:600;" id="page3-button12"ng-click = "gameEngine_v_stp()" >Stop</button>


Part of my Controller.js file

$scope.setTitle = function(table_title)
{
// table_title = "Table 1 is the title";
table_title_g = table_title ;
var table_db_ref_copy = new Firebase("https://glaring-torch-3069.firebaseio.com/tables/"); //database ref for the table
var str_table_db_ref_copy = "https://glaring-torch-3069.firebaseio.com/tables/";
var table_number = table_title_g.charAt(6);
var str_table = "table";
var str_table_final = str_table.concat(table_number);// try str_table = str_table.concat(table_number)
var str_players = "/players";
var str_table_db_ref_players = str_table_db_ref_copy.concat(str_table_final);
var str_table_db_ref_players_fb = new Firebase(str_table_db_ref_players);
var players_at_table_snapshot = null;
var get_players_at_table =
function(players_at_table_snapshot_actual)
{
players_at_table_snapshot = null;
players_at_table_snapshot = players_at_table_snapshot_actual;
};
str_table_db_ref_players_fb.on('value',get_players_at_table);
str_table_db_ref_players_fb.off('value',get_players_at_table);
var players_at_table_data = players_at_table_snapshot.val();
player_one_v = players_at_table_data.players.player1;
player_two_v = players_at_table_data.players.player2;
player_three_v = players_at_table_data.players.player3;
player_four_v = players_at_table_data.players.player4;
};
var temp_ind = 0;
var intvId = 0;
$scope.gameEngine_v = function()
{

// if(temp_ind == 1)
// {
// intvId = setInterval(gameEngine, 3000);
intvId = setTimeout(gameEngine, 3000);

// gameEngine(temp_ind);
// }
// if(temp_ind == 0)
// {
// clearInterval(intvId);
// }

};

$scope.gameEngine_v_stp = function()
{
// clearInterval(intvId);
clearTimeout(intvId);
// gameEngine(temp_ind);
};

//tables_snapshot https://glaring-torch-3069.firebaseio.com/tables
var gameEngine = function(){
// if(game_s_var == 1){
var table_db_ref = new Firebase("https://glaring-torch-3069.firebaseio.com/tables/"); //database ref for the table
players_db_ref = new Firebase("https://glaring-torch-3069.firebaseio.com/players/"); //database ref for the list of potential players
str_players_db_ref = "https://glaring-torch-3069.firebaseio.com/players/";

// Basic usage of .once() to read the data located at firebaseRef.
counter = 0;
var tables_snapshot = null;
var players_snapshot = null;
var get_tables_snapshot =
function(datasnapshot_tables)
{
tables_snapshot = null;
tables_snapshot = datasnapshot_tables;
};

var get_players_snapshot =
function(datasnapshot_players)
{
players_snapshot = null;
players_snapshot = datasnapshot_players;
};
var msg = null;
var onComplete = function(error) {
msg = null;
if (error) {
msg = "Failed Synchronization";
} else {
msg = "Success";
}
};

table_db_ref.on('value',get_tables_snapshot);
table_db_ref.off('value',get_tables_snapshot);
tables_snapshot.forEach(
function(childSnapShot)
{
var key = childSnapShot.key();
var data = childSnapShot.val();
var str_1 = "https://glaring-torch-3069.firebaseio.com/tables/";
var str_2 = "/players";
var str_3 = str_1.concat(key,str_2);
var t_mode = data.mode;
var players = new Firebase(str_3);//path for players at the table
players_db_ref.on('value',get_players_snapshot);
players_db_ref.off('value',get_players_snapshot);
var count = 0;
var flag = 0;
if(t_mode == 'singles' && flag == 0)
{
players_snapshot.forEach(
function(player_snaphot)
{
count = count + 1;
var player_data = player_snaphot.val();
var player_key = player_snaphot.key();
var str_currentPlayer = str_players_db_ref.concat(player_key);//holds the url of the current player
var currentPlayer_ref = new Firebase(str_currentPlayer);
var player_emp_id = player_data.emp_id;
if(count == 1)
{
players.update(
{
player1:player_emp_id
}
);
currentPlayer_ref.remove(onComplete);
var str_test = 'i am here !!';
}
else if (count == 2)
{
players.update(
{
player2:player_emp_id
}
);
currentPlayer_ref.remove(onComplete);
}
else
{
flag = 1;
// return true; // to go out of forEach loop
}
}
);
// var d = setTimeout(gameEngine(1), 3000);

}
count = 0 ;

if(t_mode == 'doubles' && flag == 0)
{
players_snapshot.forEach(
function(player_snaphot)
{
count = count + 1;
var player_data = player_snaphot.val();
var player_key = player_snaphot.key();
var player_emp_id = player_data.emp_id;
if(count == 1)
{
players.update({ player1:player_emp_id });
currentPlayer_ref.remove(onComplete);
}
else if (count == 2)
{
players.update({ player2:player_emp_id });
currentPlayer_ref.remove(onComplete);
}
else if (count == 3)
{
players.update({ player3:player_emp_id });
currentPlayer_ref.remove(onComplete);
}
else if (count == 4)
{
players.update({ player4:player_emp_id });
currentPlayer_ref.remove(onComplete);
}
else
{
flag = 1; // to go out of forEach loop
}
}
);
}// end of 'doubles' mode elseif
}
);

// }
};
// var d = setTimeout(gameEngine(1), 3000);


})

Answer

As David has already commented this typically happens due to race conditions. In case of your JS though its because of Async calls are not handled properly. Firebase dbref.on is Async call. When data is received from server then the function will execute. So the processing of tables_snapshot & players_at_table_snapshot has to be inside the respective Async handler functions. You have put it outside that is causing the problems.