为什么clearInterval（）不能正常工作？

Question

我想做一个简单的onclick动画。我onclicked按钮应该向左移动，然后再点击应该返回。我把clearInterval（）放在了一些地方，但我看不到任何错误。你能帮助我吗？

---

var backBack = document.getElementById('btn'); 
 
    var x = 0; 
 
    var loop = 'off'; 
 

 
    function push() { 
 
    if(loop == 'off') { 
 
    var t = setInterval(move,1); 
 
    } 
 
    if(loop == 'on') { 
 
    var t = setInterval(moveBack,1); 
 
    }} 
 

 
    function move() { 
 
    if(x < 500) { 
 
    x = x + 5; 
 
    backBack.style.left = x + 'px'; 
 
    clearInterval(t); 
 
    loop = 'on'; 
 
    }} 
 

 
    function moveBack() { 
 
    if(x > 0) { 
 
    x = x - 5; 
 
    backBack.style.right = x + 'px'; 
 
    clearInterval(t); 
 
    }}

 #btn { 
 
      position: absolute; 
 
      width: 50px; 
 
      height: 50px; 
 
      border-radius: 25px; 
 
      background-color: goldenrod; 
 
      border: none; 
 
      outline: none; 
 
     }

<button id="btn" onclick="push()" />

Answer 1

你必须把变量t的声明之外的功能。 我做了一些改变，让你的代码工作。

它应该这样做？

var backBack = document.getElementById('btn'); 
 
var x = 0; 
 
var loop = 'off'; 
 
var t; 
 

 
function push() { 
 
    if (loop == 'off') { 
 
    t = setInterval(move, 1); 
 
    } 
 
    if (loop == 'on') { 
 
    t = setInterval(moveBack, 1); 
 
    } 
 
} 
 

 
function move() { 
 
    if (x < 500) { 
 
    x = x + 5; 
 
    backBack.style.left = x + 'px'; 
 
    } else { 
 
    clearInterval(t); 
 
    loop = 'on'; 
 
    } 
 
} 
 

 
function moveBack() { 
 
    if (x > 0) { 
 
    x = x - 5; 
 
    backBack.style.left = x + 'px'; 
 
    } else { 
 
    clearInterval(t); 
 
    loop = 'off'; 
 
    } 
 
}

#btn { 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 25px; 
 
    background-color: goldenrod; 
 
    border: none; 
 
    outline: none; 
 
}

<button id="btn" onclick="push()" />