Question

我制作了一个div，我希望每1秒钟在特定的方向上制作动画。在我提供的代码中有一个名为resetPosition()的函数，不用担心，它来自我在head部分链接的其他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

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

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; - ）

Answer 2

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

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

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

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

Answer 3

问题不在setInterval中，因为同一表达式的copypasta fiddle工作正常，所以它可能是resetPosition或者easyJS的问题，尽管我怀疑后者。

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

编辑：如果demo附加在幕后的某个地方，那么它每秒仍会在该点上堆积一个新的demo

为什么我的setInterval函数第二次无效？（JavaScript的）

3 个答案:

为什么我的setInterval函数第二次无效？ （JavaScript的）

3 个答案:

为什么我的setInterval函数第二次无效？（JavaScript的）