制造物体的移动

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

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

Full fiddle

谢谢！

Answer 1

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

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

所以，你创建一个执行轮询，看看this example更详细的信息。