为什么我的setInterval函数第二次不起作用？（JavaScript的）

Question

我做了一个div，我想使其每1秒钟朝特定方向进行动画处理。 在我提供的代码中，有一个名为resetPosition()的函数不必担心，它是从我在头部分链接的其他js文件中获得的（完美运行）。 我只想知道为什么setInterval()无法正常工作？
这是我的代码：-

<!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;
}

Answer 1

这可以帮助您了解内容和方式。 （向下滚动到代码底部）：

小提琴

// 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更改为绝对position 。 这意味着您可以将其移动到任何地方。 其次，将其移动到偏移100x10。

在第二次以及之后的每次迭代中，该元素的position设置为绝对position ，并且其position为100x10。 然后，您说应该将其移至100x10 –保持原样。

如果您不更改x或y位置（左/上），则它将保持在100x10，更不用说运行循环了多少次了。 每秒运行100次，一年后仍将是100x10 ;-)

Answer 2

想一想。 每当间隔运行时，它都会创建element “ demo”的新实例。

该演示变量具有您的elements对象将其设置为的所有默认值（如果有），并且每次都运行相同的功能。 这就是为什么它只移动一次的原因。

将元素提升到更高位置，您将不必重新声明每个间隔。

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

Answer 3

这个问题是不是在setInterval ，因为copypasta'd 小提琴一样的表情的正常工作，所以它可能与任何一个问题resetPosition也许easyJS，虽然我怀疑是后者。

另外，还不清楚demo是否出现在页面上，因为它没有明显地添加到任何地方。

编辑：如果demo追加到幕后的某个地方，它仍然每秒在该位置上堆放一个新demo

为什么我的setInterval函数第二次不起作用？（JavaScript的）

问题描述

3 个解决方案

解决方案1
1 已采纳 2014-02-14 17:40:07

解决方案2
0 2014-02-14 17:20:11

解决方案3
0 2014-02-14 17:21:56

为什么我的setInterval函数第二次不起作用？ （JavaScript的）

问题描述

3 个解决方案

解决方案1 1 已采纳 2014-02-14 17:40:07

解决方案2 0 2014-02-14 17:20:11

解决方案3 0 2014-02-14 17:21:56

为什么我的setInterval函数第二次不起作用？（JavaScript的）

解决方案1
1 已采纳 2014-02-14 17:40:07

解决方案2
0 2014-02-14 17:20:11

解决方案3
0 2014-02-14 17:21:56