javascript - 启动和停止对象移动的按钮

Question

我需要创建可以执行以下操作的按钮:

1)如果单击它，按钮将开始某些对象的移动

2)如果再次单击它，则会停止移动

所以，我有这个对象:

<div id="block">I'm green square</div>

还有按钮

<button onclick="movement()">Movement</button>

我试图做的是创建一个全局变量 let positionChange = false;并首先在函数中更改 positionChange 的值然后完成下面的算法。

const movement = function() {
    const block = document.getElementById('block');
    let left = parseInt(getComputedStyle(block,null).getPropertyValue('left'));
    const width = parseInt(getComputedStyle(block,null).getPropertyValue('width'));
    if (positionChange)
    {
        positionChange = false;
    }
    else
    {
        positionChange = true;
    }
    while (positionChange)
    {
        if (left < 1000 - width)
        {
            left+=20;
            block.style.left = left+'px';
        }
        else
        {
            block.style.left = '0px';
        }
    }   
}

但是，这不起作用。那么，我该怎么办？

<小时/>

评论后我尝试重新制作我的脚本。不是我有功能changeX移动我的物体。及功能movement必须启动/停止changeX .

const changeX = function(){
    const block = document.getElementById('block');
    let left = parseInt(getComputedStyle(block,null).getPropertyValue('left'));
    const width = parseInt(getComputedStyle(block,null).getPropertyValue('width'));
    if (left < 1000 - width)
    {
        left+=20;
        block.style.left = left+'px';
    }
    else
    {
        block.style.left = '0px';
    }
}
const movement = function() {
        if (positionChange === false)
{
    //alert('Now true');
    positionChange = true;
    const timerId = setInterval(changeX,1);
}
else
{
    //alert('Now false');
    positionChange = false;
    clearInterval(timerId);
}
};

现在按钮可以启动，但无法停止移动

Answer 1

您应该将您的timerId带到全局范围。您在 if 范围内声明了timerId，因此在else 范围内，timerId 未定义。

你可以这样做:

let positionChange = false;
let timerId; // On the global scope

const ToggleMovment = () => {
    if (positionChange === false)
    {
        //alert('Now true');
        positionChange = true;
        timerId = setInterval(startMoving,1);
    }
    else
    {
        positionChange = false;
        clearInterval(timerId);
    }
};