javascript setInterval() 在 Dreamweaver 中有效，但在 Chrome 中无效

Question

每当用户单击标签中具有onClick="move()"的菜单图像时，我试图使图像从菜单中向上/向下下拉。到目前为止，图像从页面顶部、菜单后面开始，因此它是隐藏的，然后按预期向下滑动。然而，当图像到达停止点后，当我在 IE 和 Chrome 中测试页面时，再次单击菜单根本没有任何反应。在 Dreamweaver 中，代码按预期执行，能够在图像到达底部后向上滑动图像并再次向下滑动。我尝试更改对 setInterval() 的调用，因为我认为这就是问题所在，但似乎没有任何效果。为什么 Dreamweaver 可以正确执行代码，但 Chrome 或 IE 却不能？

    var onMusic=false;
    var id;
    function move() {
        if(!onMusic) {
          moveDown()        
        }
        else {
            moveUp()
        }
    }


    function moveUp() {
        top=100
        id = setInterval(function() {
            top-=10  // update parameters 
            document.getElementById('guitar').style.top = top + 'px' // show frame
            if (top <= -500)  {// check finish condition
                onMusic=false
                clearInterval(id)
            }
         }, 10) // draw every 10ms
    }

    function moveDown() {
        var top=-500
        id = setInterval(function() {
            top+=10  // update parameters 
            document.getElementById('guitar').style.top = top + 'px' // show frame
            if (top == 100)  {// check finish condition
                onMusic=true
                clearInterval(id)
            }
        }, 10) // draw every 10ms
    }

Answer 1

id 仅在 moveDown 函数的范围内可见。将其设置为全局，以便您可以在 moveUp 中调用 clearInterval(id)。

改变

function moveDown() {
    var top=-500
    var id = setInterval(function() {

至

var id;
function moveDown() {
    var top=-500
    id = setInterval(function() {

每十分之一毫秒更改一次 dom (.1) 可能有点极端......