2

I'm making a puzzle solving function which uses an array of puzzle pieces in their current shuffled order. Each piece has an id which points to the correct position in the array. I set overlay colors on the pieces that are about to be swapped. I want for there to be a delay between the pieces being colored and then swapped.

function solvePuzzle() {
    while (rezolvat == false) // while all pieces are not in correct position
        for (var i = 0; i < _piese.length; i++) { // iterates through array of puzzle pieces
            if (checkPiesa(i) == false) {
                _piesaCurentaDrop = _piese[i];
                _piesaCurenta = getPiesaDestinatie(_piesaCurentaDrop.id); // destination piece
                _context.save();
                _context.globalAlpha = .4;
                _context.fillStyle = PUZZLE_HOVER_TINT;
                _context.fillRect(_piesaCurentaDrop.xPos, _piesaCurentaDrop.yPos, _latimePiesa, _inaltimePiesa);
                _context.fillStyle = PUZZLE_DESTINATION_HOVER_TINT;
                _context.fillRect(_piesaCurenta.xPos, _piesaCurenta.yPos, _latimePiesa, _inaltimePiesa);
                _context.restore();

                // here I want to have some kind of 'sleep' for 2000 ms so you can see the pieces about to be swapped
                dropPiece(); // function for swapping puzzle pieces
            }
        }
}
1
  • 1
    Can you just wrap dropPiece in a timeout? Something like setTimeout(() => dropPiece(), 2000); Commented Nov 4, 2019 at 21:00

1 Answer 1

2

You can use javascript's setTimeout() functions which will execute the function after specified milliseconds, you can learn more about it here

function solvePuzzle() {
  while (rezolvat == false) // while all pieces are not in correct position
    for (var i = 0; i < _piese.length; i++) { // iterates through array of puzzle pieces
      (function (i) {
        setTimeout(function () {

          if (checkPiesa(i) == false) {
            _piesaCurentaDrop = _piese[i];
            _piesaCurenta = getPiesaDestinatie(_piesaCurentaDrop.id); // destination piece
            _context.save();
            _context.globalAlpha = .4;
            _context.fillStyle = PUZZLE_HOVER_TINT;
            _context.fillRect(_piesaCurentaDrop.xPos, _piesaCurentaDrop.yPos, _latimePiesa, _inaltimePiesa);
            _context.fillStyle = PUZZLE_DESTINATION_HOVER_TINT;
            _context.fillRect(_piesaCurenta.xPos, _piesaCurenta.yPos, _latimePiesa, _inaltimePiesa);
            _context.restore();

            // here I want to have some kind of 'sleep' for 2000 ms so you can see the pieces about to be swapped
            // setTimeout in side task execution
            setTimeout(() => dropPiece(), 1000); // function for swapping puzzle pieces
          }
        }, 2000 * i); // schedules excution increasingly for each iteration
      })(i);
    }
}

In the code above for loop finishes immediately, however, it schedules the execution of each iteration after a specified increased time(i*2000) using setTimeout

So the execution of the, (Despite for loop's immediate completion)

first iteration will begin immediately at 0*2000=0 mili-seconds,

the task for second execution will be executed after (1*2000),

the task for third execution will be executed after (2*2000),

and so on..

Just for a simple understanding look at the sample code below

Working Code Sample

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
      setTimeout(() => console.log(i + 0.5), 1000); // setTimeout in side task execution in case needed
    }, 2000 * i); // schedules excution increasingly for each iteration
  })(i);
}

Sign up to request clarification or add additional context in comments.

9 Comments

I tried it before and it is the closest equivalent of sleep in js but not what I'm looking for. The problem is that the timeout on the dropPiece() function doesn't stop the for from moving on to executing new iterations, therefore it moves on to new pieces before having swapped the old ones.
is your dropPiece function async?
No, it's not async.
It has the same behaviour as the previous use of setTimeout(), it continues the for iterations. Right now I'm trying to use async/await with promises to simulate the sleep I need. It does work on the first iteration but then unexpectedly exits.
it can not have the same behaviour as previous one, please check twise, it sets increasing timeout for each iteration so first iteration's task will be performed after 2 seconds. 2nd iterations's task will be executer after 4 secs and so on
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.