I'm currently working on a website that calculates the shortest path between two points in a grid utilizing AngularJS.
Although I have already implemented the algorithm and can display the colored path, I am facing an issue where the color changes tile by tile with a delay of 1 second using setTimeout. However, for some reason, the tiles are changing their color only after a mouse click event occurs, which is not the expected behavior.
For instance, when the first tile changes its color, it takes about 3 seconds and a mouse click for the next 4 tiles to change their color, and this pattern continues as time passes.
I suspected that the problem might be related to event listeners, but even after removing them post usage, the issue persists.
EDIT:
function colorThePath(tile) {
tile.color = "purple";
}
for (var i = 0; i < shortestPath.length - 1; i++) {
if (shortestPath[i] == 'East') {
$interval(function() {
colorThePath(self.board[self.startTile.x][self.startTile.y + 1])
}, 2000, 1);
self.startTile = self.board[self.startTile.x][self.startTile.y + 1];
} else if (shortestPath[i] == 'South') {
self.board[self.startTile.x + 1][self.startTile.y].color = "purple";
self.startTile = self.board[self.startTile.x + 1][self.startTile.y];
} else if (shortestPath[i] == 'West') {
self.board[self.startTile.x][self.startTile.y - 1].color = "purple";
self.startTile = self.board[self.startTile.x][self.startTile.y - 1];
} else if (shortestPath[i] == 'North') {
self.board[self.startTile.x - 1][self.startTile.y].color = "purple";
self.startTile = self.board[self.startTile.x - 1][self.startTile.y];
}
}The process of coloring the path occurs within the "go" function located at the end of the JavaScript file.
HTML code:
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8>
<title>Main</title>
<!-- angular -->
<script src="../scripts/angular.js"></script>
<script type="text/javascript" src="../scripts/angular-ui-router.js"></script>
<!-- Angular Material style sheet -->
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<!-- Angular Material Library -->
<script
src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script type="text/javascript" src="../scripts/MainRoute.js"></script>
<script type="text/javascript" src="../scripts/mainController.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/a.css"></link>
</head>
<body ng-controller="mainController as m>
<div id="navBar">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a ng-click="m.start()">Start</a></li>
<li><a ng-click="m.end()">End</a></li>
<li><a ng-click="m.go()">Go!</a></li>
</ul>
</div>
</nav>
</div>
<div>
<table id="table">
<tr ng-repeat="r in m.board">
<td ng-repeat="x in r track by x.id" style="background-color: {{x.color}}" ng-click="m.changeColor(x.id)" id="{{x.id}}">{{x.id}}</td>
</tr>
</table>
</div>
</body>
</html>JS/Angular Code:
!-- begin snippet: js hide: false console: true babel: false --
(function() {
var module = angular.module("myApp");
module.controller("mainController", mainControllerCTOR)
function mainControllerCTOR() {
this.board;
this.startTile;
this.endTile;
var self = this;
function Tile(x, y) {
this.id = x + "," + y;
this.x = x;
this.y = y;
this.pressed = false;
this.color = "yellow";
this.secret = 'Empty';
}
window.onload = function() {
self.board = [];
for (var i = 0; i < 12; i++) {
self.board[i] = [];
for (var j = 0; j < 12; j++) {
self.board[i][j] = new Tile(i, j);
}
}
}
// Rest of the JS code remains same
}
})();