javascript setInterval()在Dreamweaver中工作,但不在Chrome中

时间:2013-07-05 17:42:17

标签: javascript google-chrome dreamweaver compatibility setinterval

每当用户点击标签中包含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
    }

2 个答案:

答案 0 :(得分:3)

id仅在moveDown函数的范围内可见。将其设为全局,以便您可以在clearInterval(id)中致电moveUp

更改

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

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

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

答案 1 :(得分:0)

我认为问题是:

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/