javascript - 使对象移动时处理多次单击

Question

我有以下内容：

var player = $('#player');
//Checks to see which key is pressed down

$(window).on('mousedown', function (e) {
    console.log(e.offsetX + ', ' + e.offsetY);

    player.animate({
        left: e.offsetX + 'px',
        top: e.offsetY + 'px'
    }, 500);
});

我想要实现的是，当我单击屏幕上的某个位置时，图像会移动到该位置，但是如果我在移动动画的中间再次单击，它应该会转到我单击的最后一个位置，而不是执行首先是第一个动画。

全小提琴

谢谢！

Answer 1

打电话player.stop(false);之前player.animate(...);。它将停止播放器对象当前正在运行和排队的动画。

Answer 2

要处理多次点击，您需要创建一个池，一个由另一个函数控制的函数数组，因此当您单击主体时，您将添加一个移动图像的新函数。

下面，我展示一段代码，关于如何创建和推送函数数组：

var listRuns = [],
    ind = 0;

$('#btnRun').click(function(){
  var message = document.getElementById("txtMsg").value;

  listRuns.push(function(){
    run(message);
  });
});

然后，您需要另一个函数来控制该数组的执行，如下所示：

var runAll = function(){  
  if (listRuns.length>ind){
    listRuns[ind]();
    ind++; 
  }
};

var idInterval = setInterval(function(){
  runAll();
},1000);

因此，您创建了一个执行轮询，请查看此示例以获取更详细的信息。