-3

I have coded N-Queen problem using backtracking in javascript.

what I want to do?

I want to spot execution of script for a second every time it reaches to solution and show the solution using animation.

what is the problem?

code execution is so fast that i can not see any color transition.

here is a part of my code (where i want to spot execution of script for a second). for full code please refer to http://jsfiddle.net/a603smud/1/

function placeQueen(row){
    for(var i=0;i<N && row<N;i++){
      chess[row][i] = 1;
      var temp = row*N+i+1;
      //place a Queen (red color)
      $('#'+temp).css("background-color","red");
      //check if place is safe
      if(check(row,i)){
        if(row==N-1){
           //place is safe and it is last row then
           //solution found 
           //stop execution for a second 
           //then continue
           print();
        }
        else{
          setTimeout(function(){
              placeQueen(row+1);
          },1000);
        }
      }
      //remove the Queen (backtracking)
      $('#'+temp).css("background-color","blue");
      chess[row][i]=0;
    }
}

Red color : queen is placed on the box blue color : box is empty

Any help would be appreciated.

Community
  • 1
  • 1
suraj.tripathi
  • 417
  • 2
  • 15
  • Open the code in the debugger in either Firefox or Chrome. That way you can just follow what happens step by step. – Norbert Jun 27 '15 at 18:49
  • @ Norbert Yes i can do that using break points but i want to show this simulation to other people without using debbuger. i tried using setTimeout function but it is not working. – suraj.tripathi Jun 27 '15 at 18:56
  • Your question should contain enough code to reproduce the error, even if there's a link to a fiddle. – BSMP Jun 27 '15 at 18:57
  • @BSMP my code does not contain any error. i just want to stop execution of code for a second when it reaches to print() function. you can use break point to see my on the line when print() function is called. – suraj.tripathi Jun 27 '15 at 19:00
  • @BSMP when you put break point this it will look like this http://picpaste.com/N-Queen-keW0JK78.PNG – suraj.tripathi Jun 27 '15 at 19:07
  • Tried utilizing `setTimeout` ? – guest271314 Jun 27 '15 at 19:08
  • @guest271314 yes tried but it does not work – suraj.tripathi Jun 27 '15 at 19:10
  • OK, "error" isn't the correct word here but you code still isn't doing what you want. The question should still contain enough code to reproduce the behavior. – BSMP Jun 27 '15 at 19:10
  • @SurajTripathi Can describe _"it does not work"_ ? , include attempt with `setTimeout` at Question ? Where is `chess` defined ? – guest271314 Jun 27 '15 at 19:11
  • @guest271314 no i din. you can see the complete code on http://jsfiddle.net/a603smud/1/ i have edited my code to show my attempt with setTimeout – suraj.tripathi Jun 27 '15 at 19:27
  • @SurajTripathi: `setTimeout` doesn't stop execution. It will continue with the loop right after it scheduled that callback to be executed later. – Bergi Jun 27 '15 at 19:27
  • You will need to rewrite this into a recursive solution, so that you can return from the function right after the timeout. – Bergi Jun 27 '15 at 19:28
  • @Bergi: Then where should i put setTimeout or can you tell me any other way of doing it? – suraj.tripathi Jun 27 '15 at 19:29
  • @SurajTripathi: You will need to get rid of that `for` loop. Use recursion with a state variable, or actual continuation callbacks. Then you can use `setTimeout` as you tried - notice that it doesn't return the result, you will need to use the callback. – Bergi Jun 27 '15 at 19:34
  • Try this http://stackoverflow.com/questions/951021/what-do-i-do-if-i-want-a-javascript-version-of-sleep for example – Norbert Jun 27 '15 at 19:34
  • @Norbert i tried that also.. because browser is always busy (busy waiting)...so it does not update UI. – suraj.tripathi Jun 27 '15 at 19:42
  • Thanks @Bergi I will work on your suggestion. i think that is the only way to do it. – suraj.tripathi Jun 27 '15 at 19:44
  • Alternative idea/method: fading in/out: http://www.w3schools.com/jquery/jquery_fade.asp or CSS fade in/out: That way you do not sleep, but JS will have to wit for the fade to end. – Norbert Jun 27 '15 at 19:46

1 Answers1

1

Thanks @bergi and all for you valuable suggestions I used a array to store all the results and then using setInterval function simulated the result.

var solutionArray = [];

// run the algorithm and do
solutionArray.push(tempResult);
// on every step

var counter=0;
var myVar = setInterval(function(){ 
    simulate(solutionArray[counter++]);
    if(counter>=92){
        clearInterval(myVar);
    }
    setTimeout(function(){
        removeSimulation(solutionArray[counter]);
    },600);
}, 1000);

Here is the link to the full code

suraj.tripathi
  • 417
  • 2
  • 15
  • Could you please remove those `print()` statements from your fiddle (and update the link)? – Bergi Jun 27 '15 at 21:18