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() {

每十分之一毫秒（ .1 ）更改dom可能會有點極端...

Answer 2

我認為問題是：

top=100
// should be
var top = 100;

您可以嘗試在控制台中查看我的意思：

>top = 12 
12 
> top 
Window {top: Window, window: Window, location: Location, Proxy: Object, external: Object…}

但是我在jsfiddle中清理了一下： http : //jsfiddle.net/pNh57/1/