製造物體的移動

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更詳細的信息。