如何使用javascript中的setTimeout暂停数组的映射或循环

Question

data.map((d, i) => {
setTimeout(() => {
drawCanvas(canvasRef, d);
}, 1000 * i);
});

我使用延迟1秒的map在数组上应用了循环，现在我想在这个循环上添加一个暂停或恢复函数。有可能表演这样的节目吗？或任何其他解决方案

Answer 1

您可以使用async/await来"睡眠；在给定的持续时间内；使用CCD_ 3。

const sleep = async (ms) => new Promise(res => setTimeout(res, ms));
(async () => {
for (let i = 0; i < data.length; i++) {
await sleep(1000); // Sleep for 1 second between
drawCanvas(canvasRef, data[i]);
}
})();

工作示例

const
sleep = async (ms) => new Promise(res => setTimeout(res, ms)),
canvasRef = { current: document.querySelector('#drawing') };
const drawCanvas = (canvasRef, conf) => {
const ctx = canvasRef.current.getContext('2d');
ctx.fillStyle = conf.color;
ctx.beginPath();
switch (conf.kind) {
case 'circle':
ctx.arc(conf.x, conf.y, conf.radius, 0, 2 * Math.PI);
break;
case 'rectangle':
ctx.fillRect(conf.x, conf.y, conf.width, conf.height);
break;
case 'triangle':
ctx.moveTo(conf.x, conf.y);
ctx.lineTo(conf.x, conf.y + conf.height);
ctx.lineTo(conf.x + conf.width, conf.y + conf.height);
break;
}
ctx.closePath();
ctx.fill();
};
const data = [
{ kind: 'rectangle', x: 30, y: 40, width: 140, height: 30, color: 'blue' },
{ kind: 'rectangle', x: 80, y: 20, width: 50, height: 20, color: 'blue' },
{ kind: 'triangle', x: 130, y: 20, width: 20, height: 20, color: 'blue' },
{ kind: 'circle', x: 70, y: 70, radius: 16, color: 'red' },
{ kind: 'circle', x: 130, y: 70, radius: 16, color: 'red' },
];
Object.assign(canvasRef.current, { width: 200, height: 100 });
(async () => {
for (let i = 0; i < data.length; i++) {
await sleep(1000); // Sleep for 1 second between
drawCanvas(canvasRef, data[i]);
}
})();

#drawing { border: thin solid grey; }

<canvas id="drawing"></canvas>

Answer 2

您不能暂停map，因为它本质上是sync，现代JS有一种叫做async / await的东西，可以简单地执行此操作。

暂停可以通过使用Promise构造函数来完成，您可以根据某些事件手动解决该构造函数，例如复选框单击等。

下面是一个在无限循环中从1到10计数的简单示例，然后您可以通过选中复选框来暂停/继续。

const numbers = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
const sleep = ms => new Promise(r => setTimeout(r,ms));
const elNum = document.querySelector('#num');
const elInput = document.querySelector('input');
let pause = Promise.resolve();
const pauseClick = cb => 
elInput.addEventListener('click', cb, {once: true});
function checkForPause() {   
pauseClick(() => {
pause = new Promise(resolve => {
pauseClick(() => { resolve(); checkForPause();});
});
});
}
checkForPause();
async function run() {
while (true) {
for (const num of numbers) {
elNum.innerText = num;
await sleep(1000);
await pause;
}
}
}
run();

#num {
font-size: 20pt;
}

Pause: <input type="checkbox"/>

<div id="num">....</div>