Обработка нескольких щелчков при принятии объекта двигаться

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

Итак, вы создаете опрос казни, посмотрите на this example на более подробную информацию.