将圆从一个点过渡到另一个给定的 x、y 位置，每个点都有暂停

Question

我有代码JSFiddle将圆从A点过渡到B点。但是，如果像下面这样调用"move"方法，并且 circle 必须在每个点暂停一秒钟，我该如何修改代码以使其工作。请帮忙。

myBall.move(50,300).move(150,400).move(100,200).move(130,230);

Answer 1

经过一番尝试，我想我已经设法想出了您要查找的内容，这会创建一个移动事件队列，每次调用move时都会将其推送到该队列，然后由run函数按顺序运行此事件序列(请注意，我在开头添加了一个.move(0,0)， 在 SO 代码段中运行它会发生一些奇怪的事情，这也在 SO 上增加了短暂的延迟，但它似乎在没有它的 JSFiddle 上运行良好)：

function ball() {
const elem = document.getElementById("ball");
var q = [];
var running = false;
var me = this;
this.move = function(x, y) {
q.push([x, y]);
if (!running) {
running = true;
me.run();
}
return this;
}
this.run = function() {
if (q.length == 0) {
running = false;
} else {
var pos = q.shift();
elem.style.transform = `translate(${pos[0]}px, ${pos[1]}px)`;
setTimeout(me.run, 2000);
}
}
}
let myBall = new ball();
myBall.move(0, 0).move(50, 300).move(150, 400).move(100, 200).move(130, 230);

#ball {
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 50%;
transition: transform 2s;
}

<div id="ball">
</div>