как правильно использовать clearInterval ()?

Question

как правильно использовать clearInterval ()?

1

Я хочу использовать кнопки для непрерывного изменения положения объекта в четырех направлениях (вверх, вниз, влево и вправо) одним щелчком мыши. Когда я нажимаю одну кнопку направления, затем нажимаю кнопку "пауза", объект перестает двигаться (это работает). Но когда я несколько раз нажимал кнопку направления, не нажимая кнопку "пауза", все движения происходили в этом объекте (например, х нажатие кнопки "вверх", х увеличение скорости движения), применяется даже кнопка "пауза" только одно движение остановится.

<script>
var pause=false;
var change;
function move(event) {
    pause=false;
    console.log('start')

    var objId=event.id;
    var objStyle=document.getElementById('object');

    change=setInterval(function () {
            if (objId==='up'){
                objStyle.style.top=parseInt(objStyle.style.top)-10+'px';
            }
            else if (objId==='down'){
                objStyle.style.top=parseInt(objStyle.style.top)+10+'px';
                console.log('down')
            }
            else if (objId==='left'){
                objStyle.style.left=parseInt(objStyle.style.left)-10+'px';
            }
            else if (objId==='right'){
                objStyle.style.left=parseInt(objStyle.style.left)+10+'px';
                console.log('right')
            }



    },100)


}

function Pause() {
    clearInterval(change)
}

hei 02 авг. 2017, в 05:58

Источник

Теги:

javascript

setinterval

1 ответ

Ещё вопросы

Willis Zhang · Accepted Answer · 2017-08-02T02-41-00.000Z

Какой результат вы ожидаете?

Причина заключается в том, что каждый раз, когда вы нажимаете кнопку, переменная "change" переопределяется на новое значение идентификатора интервала, потому что был создан новый тайм-аут (например, нажмите две кнопки перед паузой и два интервала работают!). Поэтому, когда вы нажимаете кнопку "пауза", будет сброшен только тайм-аут, соответствующий последнему "изменению" идентификатора.

Если вы хотите только переместить одно направление за раз, тогда вам нужно сначала "clearInterval", когда вы нажмете кнопку перемещения, а затем установитеInterval в новое направление.

Спасибо вам большое! Я просто добавил одну строку кода, которая является clearInterval (изменить), теперь она работает, как я ожидаю.