Question

我想使用按钮通过一次单击在四个方向（向上，向下，向左和向右）连续改变对象的位置。当我点击一个方向按钮，然后点击“暂停”按钮。按钮，对象将停止移动（这是有效的）。但是当我点击方向按钮不止一次而没有给出“暂停”时。按钮，所有移动都发生在这个对象中（例如，点击的x次，以及移动速度的x次），甚至是“暂停”。按钮适用，只有一个动作会停止。

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

Answer 1

您期望得到什么结果？

原因是每次点击按钮，＆＃34;更改＆＃34;变量被重新分配给新的间隔ID值，因为创建了一个新的超时（例如，在暂停前点击两个按钮，两个间隔正在运行！）。所以当你点击＆＃34;暂停＆＃34;按钮，只有对应于最后一次＆＃34;更改＆＃34; ID将被清除。

如果你想一次只移动一个方向，那么你需要首先＆＃34; clearInterval＆＃34;单击移动按钮，然后将SetInterval设置为新方向。

如何正确使用clearInterval（）？

1 个答案: