Я работаю над анимацией, есть четыре кнопки с указаниями, которые можно нажимать несколько раз, и кнопка «Выполнить».Когда нажимаются кнопки «Выполнить», он должен выполнять все движения.
У меня есть проблема типа «ловушка 22», когда эфирные события запускаются вечно, и анимация никогда не останавливается или выполняется только один раз.
Я перепробовал несколько решений и теперь остановился на триггерах, программа работает так, что ходы добавляются в массив, а затем запускаются для цикла, механизм запуска устанавливает триггеры, которые будут запускаться для этого направления через короткие интервалы.
Приведенный ниже код выполняется только для кнопки right, чтобы воспроизвести проблему, просто дважды щелкните по ней и нажмите run, и вы поймете, что я имею в виду, я также добавил консольные отладки, которые указывают на проблему, и Jsfiddle https://jsfiddle.net/0rxs9jpy/1/ ЕслиВы хотите воспроизвести там, где он срабатывает только один раз, проверьте эту скрипку https://jsfiddle.net/0rxs9jpy/2/ или строку комментария //if (r) return;
var moves = [];
leftpx = 0;
downpx = 0;
uppx = 0;
rightpx = 0;
var up = function() {
moves.push('up')
}
var down = function() {
moves.push('down')
}
var left = function() {
moves.push('left')
}
var right = function() {
moves.push('right')
}
document.addEventListener("moveRight", function(e) {
});
document.addEventListener("stopRight", function(e) {
console.log(e.detail);
clearInterval(e.detail);
});
var Run = function() {
for (var i = 0; i < moves.length; i++) {
if (moves[i] == 'up') {
document.getElementById('square').style.top = setInterval(myMove(), 3000);
};
if (moves[i] == 'left') {
document.getElementById('square').style.left = myMove3()
};
if (moves[i] == 'down') {
document.getElementById('square').style.top = myMove2()
};
if (moves[i] == 'right') {
//if (r) return;
var r = setInterval(function() {
var event = new CustomEvent("moveRight", {
"detail": "Example of an event"
});
document.dispatchEvent(event)
var event1 = new CustomEvent("stopRight", {
"detail": r
});
document.dispatchEvent(event1);
}, 300);
};
}
moves = [];
}
function myMove4(pos) {
var elem = document.getElementById("square");
var id = setInterval(frame, 5);
var i = elem.style.left == '' ? 0 : parseInt(elem.style.left.replace('px', ''));
pos = elem.style.left == '' ? pos : pos + i;
console.log(i + ' ' + pos);
function frame() {
if (elem.style.left == pos + 'px') {
clearInterval(id);
} else {
// pos++;
elem.style.left = (i++) + "px";
}
}
}
#square {
width: 50px;
height: 50px;
background-color: blue;
position: relative;
animation: myfirst 5s linear 2s infinite alternate;
}
<input type='button' value='up' onclick='up()'></input>
<input type='button' value='down' onclick='down()'></input>
<input type='button' value='left' onclick='left()'></input>
<input type='button' value='right' onclick='right()'></input>
<input type='button' value='Run' onclick='Run()'></input>
<div id="square"></div>
<!--https://jsfiddle.net/0rxs9jpy-->
То, что я ищу, - это если я дважды нажму правую кнопку, а затем запустлю два движения, а затем остановлюсь.