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

Answer 2

你的代码片段并没有告诉我很多关于positionChange或widthChange（比如它们来自哪里，它们的范围等），而且你在while（widthChange）语句中看起来像一个阻塞循环。这是一个闭环，而且widthChange的值不太可能改变！

用于启动和停止对象移动的按钮

2 个答案: