为什么我的setInterval函数不能再次工作？（JavaScript）

我制作了一个div，我想让它在每个1秒的特定方向上生成动画。在我提供的代码中有一个名为resetPosition()的函数，请不要担心，它来自我在头部链接的其他js文件（完美地工作）。我只想知道为什么setInterval()无法正常工作？
这里是我的代码： -为什么我的setInterval函数不能再次工作？（JavaScript）

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Animtion</title> 
     <link rel="icon" href="http://3.bp.blogspot.com/-xxHZQduhqlw/T-cCSTAyLQI/AAAAAAAAAMw/o48rpWUeg2E/s1600/html-logo.jpg" type="image/jpg"> 
     <script src="easyJs.js"></script> 
     <style type="text/css"> 
      div{height:100px; width:100px; background:cyan;} 
     </style> 
    </head> 


    <body onload=""> 
     <div id="demo"></div> 
    </body> 


    <script type="text/javascript"> 
     setInterval(function(){var x = new element('demo'); 
      x.resetPosition('absolute', '100px', '10px');}, 1000); 
    </script> 
</html>

这里的easyJs： -

function element(elementId){ 
    this.myElement = document.getElementById(elementId); 

    this.resetColor = changeColor; 
    this.resetSize = changeSize; 
    this.resetBackground = changeBackground; 
    this.resetPosition = changePosition; 
    this.resetBorder = changeBorder; 
    this.resetFontFamily = changeFont; 
    this.resetFontSize = changeFontSize; 
    this.resetFontStyle = changeFontStyle; 
    this.resetZindex = changeZindex; 
    this.resetClass = changeClass; 
    this.resetTitle = changeTitle; 
    this.resetMarginTop = changeMarginTop; 
    this.resetMarginLeft = changeMarginLeft; 
    this.resetSource = changeSource; 
    this.resetInnerHTML = changeInnerHTML; 
    this.resetHref = changeHref; 
    this.resetTextDecoration = changeTextDecoration; 
    this.resetFontWeight = changeFontWeight; 
    this.resetCursor = changeCursor; 
    this.resetPadding = changePadding; 
    this.getValue = getTheValue; 
    this.getName = getTheName; 
    this.getHeight = getTheHeight; 
} 

function changeColor(color){ 
    this.myElement.style.color = color; 
} 
function changeSize(height, width){ 
    this.myElement.style.height = height; 
    this.myElement.style.width = width; 
} 
function changeBackground(color){ 
    this.myElement.style.background = color; 
} 
function changePosition(pos, x, y){ 
    this.myElement.style.position = pos; 
    this.myElement.style.left = x; 
    this.myElement.style.top = y; 
} 
function changeBorder(border){ 
    this.myElement.style.border = border; 
} 
function changeFont(fontName){ 
    this.myElement.style.fontFamily = fontName; 
} 
function changeFontSize(size){ 
    this.myElement.style.fontSize = size; 
} 
function changeZindex(indexNo){ 
    this.myElement.style.zIndex = indexNo; 
} 
function changeClass(newClass){ 
    this.myElement.className = newClass; 
} 
function changeTitle(newTitle){ 
    this.myElement.title = newTitle; 
} 
function changeMarginTop(top){ 
    this.myElement.style.marginTop = top; 
} 
function changeMarginLeft(left){ 
    this.myElement.style.marginLeft = left; 
} 
function changeSource(newSource){ 
    this.myElement.src = newSource; 
} 
function changeHref(newHref){ 
    this.myElement.href = newHref; 
} 
function changeInnerHTML(newHTML){ 
    this.myElement.innerHTML = newHTML; 
} 
function changeTextDecoration(decoration){ 
    this.myElement.style.textDecoration = decoration; 
} 
function changeFontWeight(weight){ 
    this.myElement.style.fontWeight = weight; 
} 
function changeFontStyle(style){ 
    this.myElement.style.fontStyle = style; 
} 
function changeCursor(cursor){ 
    this.myElement.style.cursor = cursor; 
} 
function changePadding(padding){ 
    this.myElement.style.padding = padding; 
} 
function getTheValue(){ 
    var theValue = this.myElement.value; 
    return theValue; 
} 
function getTheName(){ 
    var theName = this.myElement.name; 
    return theName; 
} 
function getTheHeight(){ 
    var theHeight = this.myElement.offsetHeight; 
    return theHeight; 
}

来源

2014-02-14 Faiz Ahmed

控台是否显示任何内容？你检查过javascript是否失败了吗？ – AtanuCSE

'setInterval'工作正常，问题出在你的'element'类 –

div只移动一次，控制台不显示任何东西！ –

新demo这可以帮助你看到什么，以及如何。（向下滚动到的代码底部）：

Fiddle

// Create a new EasyJS object 
var el = new element('demo'); 
// x and y position of element 
var x = 0, y = 0; 

// Interval routine 
setInterval(function(){ 
    x = x + 1; // Increment x by 1 
    y = y + 1; // Increment y by 1 
    // Move element to position xy 
    el.resetPosition('absolute', x + 'px', y + 'px'); 
    // Add text inside element showing position. 
    el.resetInnerHTML(x + 'x' + y); 

// Run five times every second 
}, 1000/5);

说明的原来的代码：

setInterval(function() { 
    // Here you re-declare the "x" object for each iteration. 
    var x = new element('demo'); 
    // Here you move the div with id "demo" to position 100x10 
    x.resetPosition('absolute', '100px', '10px'); 

// Once every second 
}, 1000);

的HTML div元件演示最初没有定位样式（CSS）。因此，根据浏览器默认值将其呈现在默认位置。

在第一次迭代中，您将样式选项position更改为绝对值。这意味着你可以在任何地方移动它。其次你移动它来抵消100x10。

在第二次和每次迭代之后，元素将position设置为绝对，并且它驻留在100x10处。然后你说它应该被移动到100x10--就像它在同一个地方一样。

如果您不更改x或y位置（左/上），它将保持在100x10，无论您运行循环多少次。一年运行100次，一年后仍然可以达到100x10 ;-)

来源

2014-02-14 17:40:07 user13500

伟大的人，你是最好的。只有你有了头脑！现在我明白了这个问题。 Thankssss reallllyyyyyyy –

@FaizAhmed：很好。现在去编码吧！祝你好运:-) – user13500

嘿，你不喜欢easyJs –

想想吧。每次间隔运行时，它会创建一个element“演示”的新实例。

此演示变量具有元素对象将其设置为（如果有）的所有默认值，并且每次都运行相同的函数。这就是为什么它只移动一次。

提升你的元素，并且你不会重新声明每个区间。

<script type="text/javascript"> 
    var x = new element('demo'); 
    setInterval(function(){ 
     x.resetPosition('absolute', '100px', '10px');}, 1000); 
</script>

来源

2014-02-14 17:20:11

仍然没有工作！ –

的问题是不是在setInterval，因为copypasta'd同样表达fiddle工作正常，所以它可能要么resetPosition也许easyJS的问题，但我怀疑是后者。

此外，目前还不清楚demo是否出现在页面上，因为它没有被添加到任何可见的地方。

编辑：如果demo某处附加在幕后，它仍然打桩现货每秒

来源

2014-02-14 17:21:56

为什么我的setInterval函数不能再次工作？ （JavaScript）

回答

相关问题

为什么我的setInterval函数不能再次工作？（JavaScript）