javascript代碼掛在網頁

我想獲得一個移動div的位置（使用CSS3動畫動畫）和連續檢查它我使用的是while(true)像下面javascript代碼掛在網頁

function detectCollision(){ 

    alert(document.getElementById("obstacle").style.left) 

    while(true){ 
     var temp = getObstaclePosition(); 

     var temp2 = getPlanePosition(); 
     if(temp[0] <= temp2[0]+500){ 
      document.getElementsByClassName("plane")[0].style.display = "none"; 
      break; 
     } 
    } 
}

這裏的問題是，經過第一個提醒頁面掛起。此外，如果我在while循環中放置一個警報，那麼它會一直彈出並且代碼正常工作，但不會以其他方式工作。讓我知道如何解決這個問題？

來源

2015-10-06 Adam nick

不使用'，而（真）'，使用[requestAnimationFrame（HTTPS：/ /developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame） – trebor

循環中的任何內容都不會改變'temp [0]'，所以沒有任何東西會使循環退出。 – Pointy

雖然循環只是要鎖定您的瀏覽器，這將阻止其他進程運行。您需要使用間隔或超時來防止鎖定。 – epascarello

而不是使用一個while (true)，這是昂貴的，你可以使用setInterval：

a = setInterval(function() { 
    var temp = getObstaclePosition(); 

    var temp2 = getPlanePosition(); 
    if(temp[0] <= temp2[0]+500){ 
     document.getElementsByClassName("plane")[0].style.display = "none"; 
     clearInterval(a); 
    } 
}, 100);

來源

2015-10-06 14:10:34

這不會按照你所做的方式工作，如果if語句返回「false」，什麼都不會發生。 –

@StephanBijzitter哪種說法？ – 2015-10-06 14:11:48

'聲明'，編輯修復這個錯字哈哈 –

的頁面不呈現，而你是內循環，從而元素的位置不會改變。這導致循環永不結束。

如果你想要做這樣的事情，你將不得不使用遞歸setTimeout或正常setInterval實現。

有了它們，每超時做一次檢查。

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

來源

2015-10-06 14:10:46

的JavaScript運行在同一個線程，因此，如果在某個循環中佔有這個具有無限循環，剩下的就是不能再運行。

至於你的循環替代，你可以使用setInterval，其中重複執行的函數或代碼片段：

setInterval(new function() { 
    // whatever 
}, 100); // repeat every 100 ms, i.e. 10 times per second

來源

2015-10-06 14:13:14

javascript代碼掛在網頁

回答

相關問題