使用javascript在循环内设置超时 [英] Setting timeout inside loop with javascript

问题描述

我正在制作一个解谜功能，它使用一组按当前打乱顺序排列的拼图.每个部分都有一个 id 指向数组中的正确位置.我在即将交换的部分上设置了叠加颜色.我希望在被着色然后交换的部分之间有一个延迟.

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
            }
        }
}

推荐答案

您可以使用 javascript 的 setTimeout() 函数，它会在指定毫秒后执行该函数，您可以在此处

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

在上面的代码中，for 循环立即完成，但是，它使用 setTimeout 安排每次迭代在指定的增加时间(i*2000)后执行

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

第一次迭代将在 0*2000=0 毫秒时立即开始，

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

第二次执行的任务会在(1*2000)之后执行，

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

第三次执行的任务会在(2*2000)之后执行，

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

等等..

只是为了简单的理解看下面的示例代码

Just for a simple understanding look at the sample code below

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

这篇关于使用javascript在循环内设置超时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！