我正在制作一个解谜函数,它使用当前打乱顺序的一系列拼图。每个片段都有一个 id,它指向数组中的正确位置。我在要交换的部分上设置了叠加颜色。我希望在着色和交换的部分之间有一个延迟。
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
}
}
}
你可以使用javascriptsetTimeout()
函数将在指定的毫秒后执行该函数,您可以了解更多信息here https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#setTimeout()
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 循环立即完成,它会在指定的增加时间后安排每次迭代的执行(i*2000
) using setTimeout
所以执行的时候,(尽管for循环立即完成)
第一次迭代将在 0*2000=0 毫秒立即开始,
第二次执行的任务将在(1*2000)之后执行,
第三次执行的任务将在(2*2000)之后执行,
等等..
只为一个简单的理解看下面的示例代码
工作代码示例
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);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)