循環更改div滾動位置時的Java導致網站崩潰

Question

我有一個div顯示一些帶有white-space:nowrap; overflow-x:scroll水平滾動圖像white-space:nowrap; overflow-x:scroll white-space:nowrap; overflow-x:scroll ，我試圖使下面的功能工作：

var mouseIsInDiv = false;
function autoScroll() {
var i = 1;
while (mouseIsInDiv = false) {
    setTimeout(function(){
    document.getElementById("theDiv").scrollLeft = i;
    i++;
    },50);
}
}

它應該循環播放（當鼠標不在此可滾動div內時），每50毫秒將滾動位置增加1px。 換句話說，應該在調用此函數時自動在圖像中滾動。 我沒有任何語法錯誤，但是每當我在網頁上按下調用此功能的按鈕時，瀏覽器就會完全崩潰-我正在使用最新版本的Chrome，Safari和Firefox。 任何想法都會很有幫助，為此我一直在扯頭發！

Answer 1

您的循環會創建許多同時發生的超時（在50毫秒后），您需要在set timeout函數內遞歸設置timeout，並詢問是否在set timeout函數內的mouseISInDiv。

當前的代碼狀態，該循環將在很短的時間內運行很多次，並且頁面將崩潰（無限制），並且在50毫秒后將運行許多設置的超時。

Answer 2

我在這方面的工作很愉快，因此盡管已經接受了正確的答案，但我還是會發布我的回復。

基本上，您需要重組所有內容，以便整個方案是異步的。 這意味着事件監聽器響應鼠標的移動，並且沒有while循環。

因此，我提出了這個小提琴 。 這是JavaScript：

var mouseIsInDiv = false;
var theDiv = document.getElementById("theDiv");
theDiv.onmouseover = function() { mouseIsInDiv = true; };
theDiv.onmouseout = function() {
    mouseIsInDiv = false;
    scrollLeft1();
};

function scrollLeft1() {
  if (mouseIsInDiv == false && theDiv.scrollLeft < theDiv.clientWidth) {
    theDiv.scrollLeft += 1;
    setTimeout(scrollLeft1, 50);
  }
}

scrollLeft1();

如您所見，該函數以遞歸方式和異步方式調用自身，並且可以在手動重置滾動后重新啟動整個過程。 您也可以為滾動完成添加事件偵聽器。