javascript setInterval(）可以在Dreamweaver中工作，但不能在Chrome中工作

javascript setInterval() working in Dreamweaver but not in Chrome

本文关键字：工作 setInterval 但不能 Chrome Dreamweaver javascript      更新时间：2023-09-26

每当用户单击标签中有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
    }

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）可能是一个小的极值。。。

我认为问题是：

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/

相关文章：