爲什麼我的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）